Modals: Difference between revisions
From Tweeki
Created page with "Category:Components__TOC__ ==== Markup==== <nowiki><btn data-toggle="modal" data-target="#myModal">Launch modal</btn></nowiki> <nowiki><div class="modal fade" id="my..." |
|||
| (10 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
[[Category:Components]]__TOC__ | [[Category:Components]]__TOC__ | ||
{{versions}} | |||
<div class="tab-content" id="versionContent"> | |||
<div class="tab-pane fade show active" id="bs4" role="tabpanel" aria-labelledby="bs4-tab"> | |||
=== Modals for Bootstrap 4 === | |||
==== Markup ==== | |||
<pre> | |||
<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> | |||
</pre> | |||
====Result==== | |||
<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> | |||
====HTML==== | |||
<pre> | |||
<p><a href="/wiki/Launch_modal" id="n-Launch-modal" class="btn btn-secondary modal-toggle" data-target="#myModal" data-toggle="modal">Launch modal</a> | |||
</p> | |||
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true"> | |||
<div class="modal-dialog" role="document"> | |||
<div class="modal-content"> | |||
<div class="modal-header"> | |||
<h5 class="modal-title" id="myModalLabel"><span class="mw-headline" id="Modal_title">Modal title</span></h5> | |||
<div class="dropdown"><span class="close" data-dismiss="modal"><span>×</span></span></div> | |||
</div> | |||
<div class="modal-body">Modal body</div> | |||
<div class="modal-footer"> | |||
<div class="btn-group mr-2"><a href="/wiki/Close" id="n-Close" class="btn btn-secondary" data-dismiss="modal">Close</a></div> | |||
<div class="btn-group mr-2"><a href="/wiki/Modal_Action" id="n-Modal-Action" class="btn btn-primary">Modal Action</a></div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</pre> | |||
</div> | |||
<div class="tab-pane fade" id="bs3" role="tabpanel" aria-labelledby="bs3-tab"> | |||
=== Modals for Bootstrap 3 === | |||
==== Markup==== | ==== Markup==== | ||
| Line 21: | Line 95: | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
====Result==== | ====Result==== | ||
| Line 31: | Line 107: | ||
<div class="modal-content"> | <div class="modal-content"> | ||
<div class="modal-header"> | <div class="modal-header"> | ||
<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> | ||
<h4 class="modal-title">Modal title</h4> | <h4 class="modal-title">Modal title</h4> | ||
</div> | </div> | ||
| Line 42: | Line 118: | ||
</div> | </div> | ||
</div> | </div> | ||
====HTML==== | ====HTML==== | ||
<pre> | <pre> | ||
<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">&times;</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> | |||
</pre> | </pre> | ||
</div> | |||
</div> | |||
Latest revision as of 23:33, 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" 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-secondary modal-toggle" data-target="#myModal" data-toggle="modal">Launch modal</a>
</p>
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel"><span class="mw-headline" id="Modal_title">Modal title</span></h5>
<div class="dropdown"><span class="close" data-dismiss="modal"><span>×</span></span></div>
</div>
<div class="modal-body">Modal body</div>
<div class="modal-footer">
<div class="btn-group mr-2"><a href="/wiki/Close" id="n-Close" class="btn btn-secondary" data-dismiss="modal">Close</a></div>
<div class="btn-group mr-2"><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>