模态框(Modal)

使用Bootstrap的JavaScript模式插件将对话框添加到您的网站,以获取灯箱(lightboxes),用户通知或完全自定义的内容。

怎么运行的

在开始使用Bootstrap的模式组件之前,请确保阅读以下内容,因为我们的菜单选项最近已更改。

  • 使用HTML,CSS和JavaScript构建模态。 它们位于文档中所有其他内容的上方,并从<body>中移除滚动,从而使模式内容滚动。
  • 单击模式”backdrop”将自动关闭模式。
  • Bootstrap一次仅支持一个模式窗口。 不支持嵌套模式,因为我们认为它们是糟糕的用户体验。
  • 模态使用position: fixed,有时可能对其渲染有些特殊。 尽可能将模式HTML放在顶级位置,以避免其他元素的潜在干扰。 在另一个固定元素中嵌套.modal时,您可能会遇到问题。
  • 再一次,由于position: fixed,在移动设备上使用模态有一些警告。 See our browser support docs for details.
  • 由于HTML5是如何定义其语义的,the autofocus HTML attribute在Bootstrap中无效 模态框modals 为了达到相同的效果,请使用一些自定义JavaScript:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

继续阅读有关演示和使用指南。

例子

模态框(Modal)组件

以下是_static_模态示例(表示其positiondisplay已被覆盖)。 包括模态页眉,模态主体(对于padding是必需的)和模态(modal)页脚(可选)。 我们要求您在可能的情况下在模态(modal)标头中包含dismiss动作,或提供另一个显式的dismiss动作。

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</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>
  </div>
</div>

现场演示

通过单击下面的按钮来切换工作模式演示。 它将向下滑动并从页面顶部淡入。

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

<!-- Modal -->
<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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </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>

静态背景

如果将背景设置为静态,则在其外部单击时,模式不会关闭。 单击下面的按钮尝试。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </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">Understood</button>
      </div>
    </div>
  </div>
</div>

滚动长内容

当Modal对用户的视口或设备而言变得太长时,它们将独立于页面本身滚动。 请尝试下面的演示,以了解我们的意思。

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

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </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-dialog中添加.modal-dialog-scrollable来滚动模态主体。

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

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </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-dialog-centered添加到.modal-dialog中以垂直居中模态。

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

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </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>

工具提示和弹出窗口

Tooltips and popovers可以根据需要放在模式中。 关闭模态后,其中的所有工具提示和弹出窗口也将自动关闭。

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

使用网格

通过在.modal-body中嵌套.container-fluid,在模式中利用Bootstrap网格系统。 然后,像在其他任何地方一样使用普通的网格系统类。

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

各种模态内容

是否有一堆按钮都触发相同的模式,但内容略有不同? 使用event.relatedTargetHTML data-* attributes (possibly via jQuery) ,以根据单击哪个按钮来更改模式的内容。

下面是一个实时演示,后面是示例HTML和JavaScript。 有关更多信息,请read the modal events docs以获取有关relatedTarget的详细信息。

<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">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-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>
$('#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)
})

变更动画

$ modal-fade-transform变量在模态淡入动画之前确定.modal-dialog的变换状态,$modal-show-transform变量在以下位置确定.modal-dialog的变换。 模态淡入动画的结尾。

例如,如果要放大动画,可以设置$modal-fade-transform:scale(.8)

删除动画

对于只显示而不是淡入淡出查看的模态,请从模态标记中删除.fade类。

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

动态高度

如果模态的高度在打开时发生变化,则应调用$('#myModal').modal('handleUpdate') 以重新调整模态的位置,以防出现滚动条。

辅助功能(Accessibility)

确保将引用模式标题的role =“ dialog”aria-labelledby =“ ...”添加到.modal,并将role =“ document”添加到.modal-dialog。 本身。 另外,您可以在.modal上使用aria- describeby`来描述模态对话框。

嵌入YouTube视频

将YouTube视频嵌入模态中需要使用Bootstrap中没有的其他JavaScript才能自动停止播放等等。See this helpful Stack Overflow post了解更多信息。

可选尺寸

模态有三种可选的大小,可通过修饰符类将其置于`.modal-dialog’上。 这些大小会在某些断点处插入,以避免在较窄的视口上出现水平滚动条。

Size Class Modal max-width
Small .modal-sm 300px
Default None 500px
Large .modal-lg 800px
Extra large .modal-xl 1140px

我们没有修饰符类的默认模态构成“中等”尺寸的模态。

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

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

<!-- Large modal -->
<button type="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" role="document">
    <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" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

用法

模态插件通过数据属性或JavaScript按需切换隐藏的内容。 它还向<body>添加“ .modal-open”以覆盖默认的滚动行为,并生成“ .modal-backdrop”以提供单击区域,以在模态外部单击时关闭显示的模态。

通过数据属性

无需编写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)

可以通过数据属性或JavaScript传递选项。 对于数据属性,将选项名称附加到data-中,如`data-backdrop =“”中所示。

Name Type Default Description
backdrop boolean or the string 'static' true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click or on escape key press.
keyboard boolean true Closes the modal when escape key is pressed
focus boolean true Puts the focus on the modal when initialized.
show boolean true Shows the modal when initialized.

方法

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

.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')

.modal('handleUpdate')

如果模态的高度在打开时发生变化(即出现滚动条),则手动重新调整模态的位置。

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

.modal('dispose')

销毁元素的模态。

Events

Bootstrap的模态类公开了一些事件,可以挂接到模态功能上。 所有模态事件都会在模态本身上触发(即在<div class =“ modal”>`上)。

Event Type Description
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modal This event is fired immediately when the hide instance method has been called.
hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modal This event is fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})