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 21 22 23 24 25
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> ×</button> <h4 class="modal-title" id="myModalLabel"> Modal title</h4> </div> <div class="modal-body"> One fine body... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> Close</button> <button type="button" class="btn btn-primary"> Save changes</button> </div> </div> </div> </div>
1 2 3 4 5
<a class="img-thumbnail lightbox pull-left" href="/Portals/40/img/projects/project.jpg" data-plugin-options="{'type':'image'}"> <img alt="" class="img-responsive" src="/Portals/40/img/projects/project-thumb.jpg" /> <span class="zoom"><em class="icon icon-16 icon-white-shadowed icon-search"></em> </span></a>