Modal & Lightbox

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
 
<button type="button" class="btn btn-primary btn-lg push-top push-bottom" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
                <h4 id="myModalLabel" class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                One fine body...
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
                <button class="btn btn-primary" type="button">Save changes</button>
            </div>
        </div>
    </div>
</div>

1
2
3
4
5
6
 
<a class="img-thumbnail lightbox pull-left" href="img/projects/project-4.jpg" data-plugin-options="{'type':'image'}">
    <img alt="" class="img-responsive" width="215" src="/Portals/tucson/img/projects/project-4.jpg" />
    <span class="zoom">
        <em class="fa fa-search"></em>
    </span>
</a>