http://x.9tripod.com/wiki/zh/index.php?action=history&feed=atom&title=BootStrap_ModalsBootStrap Modals - 版本历史2026-04-19T21:05:49Z本wiki的该页面的版本历史MediaWiki 1.28.0http://x.9tripod.com/wiki/zh/index.php?title=BootStrap_Modals&diff=206&oldid=prevAdmin：创建页面，内容为“__NOTOC__ <div class="col-md-4"> <p><div class="btn btn-success" data-toggle="modal" data-target="#myModal">Launch Button Modal</div></p> </div>...”2016-12-07T10:53:23Z<p>创建页面，内容为“__NOTOC__ <div class="col-md-4"> <p><div class="btn btn-success" data-toggle="modal" data-target="#myModal">Launch Button Modal</div></p> </div>...”</p>
<p><b>新页面</b></p><div>__NOTOC__<br />
<div class="col-md-4"><br />
<p><div class="btn btn-success" data-toggle="modal" data-target="#myModal">Launch Button Modal</div></p><br />
</div><br />
<div class="col-md-4"><br />
<p>The same functionality is available with text - <span data-toggle="modal" data-target="#myModal" style="cursor: pointer; ">'''Launch Text Modal'''</span> and images <i class="fa fa-arrow-right"></i></p><br />
</div><br />
<div class="col-md-4"><br />
<p><div class="" data-toggle="modal" data-target="#myModal" style="cursor: pointer; ">https://res.cloudinary.com/anthom/image/upload/v1461970848/dms_security.png</div></p><br />
</div><br />
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><br />
<div class="modal-dialog"><br />
<div class="modal-content"><br />
<div class="modal-header"><br />
<div class="button" class="close" data-dismiss="modal" aria-hidden="true">×</div><br />
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4><br />
</div><br />
<div class="modal-body"><br />
<h4>Paragraphs</h4><br />
<p><strong>Any of the other Bootstrap features listed on this demo site can be used inside this modal.</strong></p><br />
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p><br />
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p><br />
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p><br />
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p><br />
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p><br />
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p><br />
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p><br />
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p><br />
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p><br />
</div><br />
<div class="modal-footer"><br />
<div class="button" class="btn btn-default" data-dismiss="modal">Close</div><br />
<div class="button" class="btn btn-primary">Visit Page</div><br />
</div><br />
</div><br />
</div><br />
</div><br />
<h4 class="subtitle-black">Using Modals</h4> <br />
<p>Use the following block of code to create a button Modal</p><br />
<pre><br />
<div class="btn btn-success" data-toggle="modal" data-target="#myModal">Launch Modal</div><br />
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><br />
<div class="modal-dialog"><br />
<div class="modal-content"><br />
<div class="modal-header"><br />
<div class="close" data-dismiss="modal" aria-hidden="true">×</div><br />
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4><br />
</div><br />
<div class="modal-body"><br />
<h4>Paragraphs</h4><br />
<p>Any of the other Bootstrap features listed on this demo site can be used inside this modal.</p><br />
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi<br />
leo risus, porta ac consectetur ac, vestibulum at eros.</p><br />
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum<br />
faucibus dolor auctor.</p><br />
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.<br />
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p><br />
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi<br />
leo risus, porta ac consectetur ac, vestibulum at eros.</p><br />
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum<br />
faucibus dolor auctor.</p><br />
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.<br />
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p><br />
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi<br />
leo risus, porta ac consectetur ac, vestibulum at eros.</p><br />
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum<br />
faucibus dolor auctor.</p><br />
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.<br />
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p><br />
</div><br />
<div class="modal-footer"><br />
<div class="btn btn-default" data-dismiss="modal">Close</div><br />
<div class="btn btn-primary">Visit Page</div><br />
</div><br />
</div><br />
</div><br />
</div><br />
</pre><br />
<p>For a text based Modal replace line one with;</p><br />
<pre><br />
<span data-toggle="modal" data-target="#myModal">'''Launch Text Modal'''</span></pre><br />
<p>And for image based Modal replace line one with;</p><br />
<pre><br />
<div class="" data-toggle="modal" data-target="#myModal">http://mediawikibootstrapskin.co.uk/images/carousel_1_thumb.jpg</div></pre></div>Admin