W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap 模态框



模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集。

Note 提示: 如果您想要单独引用该插件的功能,那么您需要引用 modal.js 。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js 。

创建

下面的实例演示如何创建基本的模态框:

Example

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
尝试一下 »

可选尺寸

模态框提供了两个可选尺寸(大尺寸:.modal-lg;小尺寸:.modal-sm),通过为 .modal-dialog 增加一个样式调整类实现。

小尺寸模态框

<div class="modal-dialog modal-sm">
尝试一下 »

大尺寸模态框

<div class="modal-dialog modal-lg">
尝试一下 »
Note 默认情况下,模态框为中型尺寸。
Note 提示: 千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。
Note 提示: 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现和/或功能。

Complete Bootstrap Modal Reference

For a complete reference of all modal options, methods and events, go to our Bootstrap JS Modal Reference.