查看“BootStrap Modals”的源代码

__NOTOC__
<div class="col-md-4">
        <p><div class="btn btn-success" data-toggle="modal" data-target="#myModal">Launch Button Modal</div></p>
        </div>
        <div class="col-md-4">
        <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>
        </div>
        <div class="col-md-4">
        <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>
        </div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="button" class="close" data-dismiss="modal" aria-hidden="true">×</div>
                    <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
                </div>
                <div class="modal-body">
                    <h4>Paragraphs</h4>
                    <p><strong>Any of the other Bootstrap features listed on this demo site can be used inside this modal.</strong></p>
                    <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>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <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>
                    <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>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <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>
                    <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>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <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>
                </div>
                <div class="modal-footer">
                    <div class="button" class="btn btn-default" data-dismiss="modal">Close</div>
                    <div class="button" class="btn btn-primary">Visit Page</div>
                </div>
            </div>
        </div>
    </div>
<h4 class="subtitle-black">Using Modals</h4> 
<p>Use the following block of code to create a button Modal</p>
<pre>
    <div class="btn btn-success" data-toggle="modal" data-target="#myModal">Launch Modal</div>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <div class="close" data-dismiss="modal" aria-hidden="true">×</div>
            <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
          </div>
          <div class="modal-body">
            <h4>Paragraphs</h4>
            <p>Any of the other Bootstrap features listed on this demo site can be used inside this modal.</p>
            <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>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
            faucibus dolor auctor.</p>
            <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>
            <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>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
            faucibus dolor auctor.</p>
            <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>
            <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>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
            faucibus dolor auctor.</p>
            <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>
          </div>
          <div class="modal-footer">
            <div class="btn btn-default" data-dismiss="modal">Close</div>
            <div class="btn btn-primary">Visit Page</div>
          </div>
        </div>
      </div>
    </div>
</pre>
<p>For a text based Modal replace line one with;</p>
        <pre>
        <span data-toggle="modal" data-target="#myModal">'''Launch Text Modal'''</span></pre>
        <p>And for image based Modal replace line one with;</p>
         <pre>
        <div class="" data-toggle="modal" data-target="#myModal">http://mediawikibootstrapskin.co.uk/images/carousel_1_thumb.jpg</div></pre>