Difference between revisions of "Modals"

From Tweeki
Jump to: navigation, search
 
(4 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
<div class="tab-content" id="versionContent">
 
<div class="tab-content" id="versionContent">
 
   <div class="tab-pane fade show active" id="bs4" role="tabpanel" aria-labelledby="bs4-tab">
 
   <div class="tab-pane fade show active" id="bs4" role="tabpanel" aria-labelledby="bs4-tab">
==== Markup====
+
=== Modals for Bootstrap 4 ===
  
<nowiki><btn data-toggle="modal" data-target="#myModal">Launch modal</btn></nowiki>
+
==== Markup ====
 
<nowiki><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></nowiki>
 
  <nowiki><div class="modal-dialog"></nowiki>
 
    <nowiki><div class="modal-content"></nowiki>
 
    <nowiki> <div class="modal-header"></nowiki>
 
        <nowiki><btn type="button" class="close" data-dismiss="modal" aria-label="Close"></nowiki>
 
          <nowiki><span aria-hidden="true">&times;</span></nowiki>
 
        <nowiki></btn></nowiki>
 
        <nowiki><h4 class="modal-title">Modal title</h4></nowiki>
 
      <nowiki></div></nowiki>
 
      <nowiki><div class="modal-body">Modal body</div></nowiki>
 
      <nowiki><div class="modal-footer"></nowiki>
 
        <nowiki><btn data-dismiss="modal">Close</btn></nowiki>
 
        <nowiki><btn class="btn btn-primary">Modal Action</btn></nowiki>
 
      <nowiki></div></nowiki>
 
    <nowiki></div></nowiki>
 
  <nowiki></div></nowiki>
 
<nowiki></div></nowiki>
 
  
 +
<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">&times;</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====
 
====Result====
Line 33: Line 33:
  
 
<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">
         <btn type="button" class="close" data-dismiss="modal" aria-label="Close">|<span aria-hidden="true">&times;</span></btn>
+
         <h5 class="modal-title" id="myModalLabel">Modal title</h5>
        <h4 class="modal-title">Modal title</h4>
+
        <btn class="close" data-dismiss="modal" aria-label="Close">|<span aria-hidden="true">&times;</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">Close</btn>
 
         <btn class="btn btn-primary">Modal Action</btn>
 
         <btn class="btn btn-primary">Modal Action</btn>
 
       </div>
 
       </div>
Line 47: Line 47:
 
   </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><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>
 
</p>
<div class="modal fade" id="myModal">
+
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" style="display: none;" 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">
         <div class="dropdown"><a href="INVALID-TITLE:&lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;" id="n-.3Cspan-aria-hidden.3D.22true.22.3E.C3.97.3C.2Fspan.3E" class="close" data-dismiss="modal"><span>&#215;</span></a></div>
+
         <h5 class="modal-title" id="myModalLabel"><span class="mw-headline" id="Modal_title">Modal title</span></h5>
         <h4 class="modal-title"><span class="mw-headline" id="Modal_title"></span>Modal title</h4>
+
         <div class="dropdown"><span class="close" data-dismiss="modal"><span>×</span></span></div>
 
       </div>
 
       </div>
 
       <div class="modal-body">Modal body</div>
 
       <div class="modal-body">Modal body</div>
 
       <div class="modal-footer">
 
       <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 mr-2"><a href="/wiki/Close" id="n-Close" class="btn btn-secondary" 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 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>
Line 74: Line 72:
 
</div>
 
</div>
 
   <div class="tab-pane fade" id="bs3" role="tabpanel" aria-labelledby="bs3-tab">
 
   <div class="tab-pane fade" id="bs3" role="tabpanel" aria-labelledby="bs3-tab">
 +
 +
=== Modals for Bootstrap 3 ===
 +
 
==== Markup====
 
==== Markup====
  

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

Launch modal

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

Launch modal


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">&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>