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">×</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/21/img/projects/project-4.jpg" /> <span class="zoom"> <em class="fa fa-search"></em> </span> </a>