[分享]给网站添加一个模态框，弹出显示某些内容。

给首页的头部图片做了一个弹出显示，点击看图就会看到一个弹出框，这是基于bootstrap的模态框实现。模态框提供了两个可选尺寸，通过为 .modaldialog 增加一个样式调整类实现。 大尺寸：cl...

给首页的头部图片做了一个弹出显示，点击看图就会看到一个弹出框，这是基于bootstrap的模态框实现。

模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现。

    大尺寸：class="modal-dialog modal-lg"
    小尺寸：class="modal-dialog modal-sm"

通过 data 属性来调用：

<button type="button" data-toggle="modal" data-target="#myModal">模态框</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">标题</h4>
      </div>
      <div class="modal-body">
        需要展示的内容。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">其他功能</button>
      </div>
    </div>
  </div>
</div>

为了能够正常显示，需要注意的是：
所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。
先引入jQuery 之后再引入 bootstrap 。
如果不弹出，请检查jQuery版本是否合适。