Modals
From Tweeki
Modals for Bootstrap 4
Markup
<btn data-toggle="modal" data-target="#myModal">Launch modal</btn> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="myModalLabel">Modal title</h5> <btn class="close" data-dismiss="modal" aria-label="Close">|<span aria-hidden="true">×</span></btn> </div> <div class="modal-body">Modal body</div> <div class="modal-footer"> <btn class="btn btn-secondary" data-dismiss="modal">Close</btn> <btn class="btn btn-primary">Modal Action</btn> </div> </div> </div> </div>
Result
HTML
<p><a href="/wiki/Launch_modal" id="n-Launch-modal" class="btn btn-default modal-toggle" data-target="#myModal" data-toggle="modal">Launch modal</a> </p> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="dropdown"><a href="INVALID-TITLE:<span aria-hidden="true">×</span>" id="n-.3Cspan-aria-hidden.3D.22true.22.3E.C3.97.3C.2Fspan.3E" class="close" data-dismiss="modal"><span>×</span></a></div> <h4 class="modal-title"><span class="mw-headline" id="Modal_title"></span>Modal title</h4> </div> <div class="modal-body">Modal body</div> <div class="modal-footer"> <div class="btn-group"><a href="/wiki/Close" id="n-Close" class="btn btn-default" data-dismiss="modal">Close</a></div> <div class="btn-group"><a href="/wiki/Modal_Action" id="n-Modal-Action" class="btn btn-primary">Modal Action</a></div> </div> </div> </div> </div>
Modals for Bootstrap 3
Markup
<btn data-toggle="modal" data-target="#myModal">Launch modal</btn> <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"> <btn type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </btn> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body">Modal body</div> <div class="modal-footer"> <btn data-dismiss="modal">Close</btn> <btn class="btn btn-primary">Modal Action</btn> </div> </div> </div> </div>
Result
HTML
<p><a href="/wiki/Launch_modal" id="n-Launch-modal" class="btn btn-default modal-toggle" data-target="#myModal" data-toggle="modal">Launch modal</a> </p> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="dropdown"><a href="INVALID-TITLE:<span aria-hidden="true">×</span>" id="n-.3Cspan-aria-hidden.3D.22true.22.3E.C3.97.3C.2Fspan.3E" class="close" data-dismiss="modal"><span>×</span></a></div> <h4 class="modal-title"><span class="mw-headline" id="Modal_title"></span>Modal title</h4> </div> <div class="modal-body">Modal body</div> <div class="modal-footer"> <div class="btn-group"><a href="/wiki/Close" id="n-Close" class="btn btn-default" data-dismiss="modal">Close</a></div> <div class="btn-group"><a href="/wiki/Modal_Action" id="n-Modal-Action" class="btn btn-primary">Modal Action</a></div> </div> </div> </div> </div>