Skip to main content

组件

十几种可以重复使用的组件,包括按钮、下拉菜单、输入组、导航、提示框等。

--本章内容翻译由:樊潇洁友情提供

模态框

模块框是一种流畅的、灵活的、对话框式的提示,有最小化的功能需求,以及智能默认值。

内容

由于HTML5定义了它的语义,autofocus HTML 属性在Bootstrap模态框中产生不了影响。为了实现同样的效果,使用一些自定义JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

不支持打开多个模态框

确保不要在一个模态框还可见的时候打开另一个模态框。在同一时候显示超过一个模态框,需要自定义代码。

模态框标记位置

尽可能把一个模态框的HTML代码始终放置在document的顶层位置,以避免别的组件影响模态框的外观以及功能。

移动设备警告

这里有一些在移动设备上使用模态框的警告,欲知详情,请看浏览器支持文档

静态例子

一个经渲染的模态框,带有头、主体,以及有一些操作功能的脚。

<div class="modal fade">
  <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>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

现场演示

利用JavaScript,通过点击下面的按钮,切换一个模态框。它将从网页顶上滑下来,并淡入。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<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">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

使模态框可访问

确保.modal添加了role="dialog"aria-labelledby="...",并引用了模态框的标题,而.modal-dialog上面则添加了role="document"

另外,你可以在.modal上添加一个aria-describedby属性,是对模态框的描述。

嵌入YouTube视频

在模态框中嵌入Youtube视频,需要Bootstrap中没有的JavaScript,用来实现自动中断和拖放等功能。欲知详情请看Stack Overflow post

可选的尺寸

模态框有两种可选的尺寸,利用修饰类放在.modal-dialog上就可用了。

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

移除动画

如果模态框仅要求它出现,但是不要淡出淡入效果,只需从模态框标记上移除.fade类。

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  ...
</div>

使用网格系统

为了在模态框中使用Bootstrap的网格系统,只需要在.modal-body内部嵌套一个container-fluid,然后在该容器中使用普通的网格系统类。

<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
  <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="gridModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div class="bd-example bd-example-padded-bottom">
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
    Launch demo modal
  </button>
</div>

基于触发按钮的多样化模态框

有几个按钮触发同样的模态框,只是内容有一些不同?使用event.relatedTarget以及HTML的data-* 属性根据点击的是哪个按钮,多样化模态框的内容。参阅relatedTarget以增进对模态框事件的了解。

<div class="bd-example">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <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>
            <span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title" id="exampleModalLabel">New message</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">Recipient:</label>
              <input type="text" class="form-control" id="recipient-name">
            </div>
            <div class="form-group">
              <label for="message-text" class="control-label">Message:</label>
              <textarea class="form-control" id="message-text"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Send message</button>
        </div>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

高度不固定的模态框

如果一个模态框在打开时,高度发生变化,万一出现了滚动条,你必须调用$('#myModal').data('bs.modal').handleUpdate()以调整模态框的位置。

用途

模态框插件利用data属性或者JavaScript,根据需要切换隐藏的内容。它还向<body>添加了.modal-open类以覆盖默认的滚动行为,并生成一个.modal-backdrop类以提供一个点击区域,当在模态框的外面点击就可以抹除显示的模态框。

利用data属性

不用写JavaScript也能激活一个模态框。在一个控件元素(比如说一个按钮)上设置data-toggle="modal",同时在添加一个data-target="#foo"或者href="#foo"以指向某一个模态框,就可以切换了。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

利用JavaScript

只需要一行JavaScript就可以对id为myModal的元素调用模态框。

$('#myModal').modal(options)

选项

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

名称 类型 默认值 描述
backdrop 布尔值或字符串static true 包括了一些modal-backdrop元素。作为替补,为一个backdrop指定值static,单击的时候就不会关闭模态框。
keyboard 布尔值 true 在按下Esc键的时候关闭模态框。
show 布尔值 true 在初始化的时候显示该模态框。

方法

.modal(options)

把某块内容作为模态框激活。接受一个可选的参数object

$('#myModal').modal({
  keyboard: false
})

.modal(‘toggle’)

人为切换一个模态框。在模态框真正显示或隐藏之前返回给调用者(即,在shown.bs.modal或者hidden.bs.modal事件发生之前)。

$('#myModal').modal('toggle')

.modal(‘show’)

人为打开一个模态框。在模态框真正显示之前返回给调用者(即,在shown.bs.modal事件发生之前)。

$('#myModal').modal('show')

.modal(‘hide’)

人为隐藏一个模态框。在模态框真正隐藏之前返回给调用者(即,在hidden.bs.modal事件发生之前)。

$('#myModal').modal('hide')

事件

Bootstrap的模态框类为模态框相关的回调函数提供了事件接口。所有的模态框事件都能由模态框自身触发。

事件类型 描述
show.bs.modal 当调用show实例方法时,会立即触发该事件。如果是由点击引起的,被点击的元素是可用的,成为Event对象的relatedTarget属性。
shown.bs.modal 当模态框对用户来说可见时(需要等待CSS过渡完成),会触发该事件。如果是由点击引起的,被点击的元素是可用的,成为Event对象的relatedTarget属性。
hide.bs.modal 当调用hide实例方法时,会立即触发该事件。
hidden.bs.modal 当模态框对用户来说终于完成隐藏时(需要等待CSS过渡完成),会触发该事件。
loaded.bs.modal 当模态框使用remote选项完成内容载入时,会立即触发该事件。
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})