Difference between revisions of "Modals"
From Tweeki
(→Result) |
|||
Line 32: | Line 32: | ||
====Result==== | ====Result==== | ||
− | <btn data-toggle="modal" data-target="#myModal">Launch modal</btn> | + | <btn data-toggle="modal" data-target="#myModal" type="button">Launch modal</btn> |
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | ||
− | <div class="modal-dialog"> | + | <div class="modal-dialog" role="document"> |
<div class="modal-content"> | <div class="modal-content"> | ||
<div class="modal-header"> | <div class="modal-header"> | ||
+ | <h5 class="modal-title" id="myModalLabel">Modal title</h5> | ||
<btn type="button" class="close" data-dismiss="modal" aria-label="Close">|<span aria-hidden="true">×</span></btn> | <btn type="button" class="close" data-dismiss="modal" aria-label="Close">|<span aria-hidden="true">×</span></btn> | ||
− | |||
</div> | </div> | ||
<div class="modal-body">Modal body</div> | <div class="modal-body">Modal body</div> | ||
<div class="modal-footer"> | <div class="modal-footer"> | ||
− | <btn data-dismiss="modal">Close</btn> | + | <btn class="btn btn-secondary" data-dismiss="modal" type="button">Close</btn> |
− | <btn class="btn btn-primary">Modal Action</btn> | + | <btn class="btn btn-primary" type="button">Modal Action</btn> |
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | |||
− | |||
====HTML==== | ====HTML==== |
Revision as of 23:28, 16 November 2020
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"> <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>
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>