目录 搜索
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
文字

使用 Bootstrap 的 JavaScript 模式插件为您的网站添加对话框,了解 Lightbox,用户通知或完全自定义内容。

怎么运行的

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

  • Modals 是用 HTML,CSS 和 JavaScript 构建的。它们位于文档中的所有其他位置,并从滚动中移除,<body>以便模式内容可以滚动。

  • 点击模式“背景”会自动关闭模式。

  • Bootstrap 一次只支持一个模式窗口。不支持嵌套模式,因为我们认为它们是糟糕的用户体验。

  • 模态的使用position: fixed,有时候对它的渲染有点特别。尽可能将模态 HTML 置于顶层位置,以避免其他元素的潜在干扰。嵌套.modal在另一个固定元素中时,您可能会遇到问题。

  • 由于position: fixed这一点,在移动设备上使用模块还有一些注意事项。有关详情,请参阅我们的浏览器支持文档

  • 由于 HTML5 定义了其语义,因此autofocusHTML 属性在 Bootstrap 模式中不起作用。要达到相同的效果,请使用一些自定义 JavaScript:

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

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

示例

模态组件

下面是一个静态模式的例子(指其positiondisplay被覆盖)。包括模态标题,模态主体(必需padding)和模态页脚(可选)。我们要求您在可能的情况下包含解除操作的模态标头,或者提供另一个明确的解雇操作。

<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-primary">Save changes</button>        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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="#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>

工具提示和弹出

工具提示和弹出可以根据需要放置在模块中。当模式关闭时,其中的任何工具提示和弹出窗口也会自动解除。

<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利用模式中的引导网格系统内。然后,像任何其他地方一样使用正常的网格系统类。

<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.relatedTarget和 HTML data-*属性(可能通过 jQuery)根据点击哪个按钮来改变模式的内容。

下面是一个现场演示,后面是示例 HTML 和 JavaScript。有关更多信息,请阅读模式事件文档以获取详细信息在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)})

删除动画

对于简单出现而不是淡入查看的模态,从模态标记中删除.fade类。

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

动态高度

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

无障碍

一定要加role="dialog"aria-labelledby="...",引用模式称号,.modal以及role="document".modal-dialog本身。另外,你可以在上.modalaria-describedby来描述你的模态对话框。

嵌入 YouTube 视频

以模式嵌入 YouTube 视频需要不在 Bootstrap 中的其他 JavaScript 才能自动停止播放等等。看到这个有用的堆栈溢出帖子了解更多信息。

可选尺寸

Modals 有两个可选的尺寸,可通过修饰符类放置在一个.modal-dialog上。这些尺寸在某些断点处启动以避免较窄视口上的水平滚动条。

<!-- 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">    <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>

用法

模式插件通过数据属性或JavaScript来按需切换隐藏内容。它还增加.modal-open<body>覆盖默认的滚动行为,并生成一个.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 调用带 idmyModal的模式:

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

选项

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

名称

类型

默认

描述

backdrop

布尔值或字符串'static'

包含模态背景元素。或者,为点击时不关闭模式的背景指定静态。

keyboard

布尔

按下退出键时关闭模式

focus

布尔

初始化时将重点放在模态上。

show

布尔

初始化时显示模式。

方法

异步方法和转换

所有 API 方法都是异步的并开始转换。一旦转换开始但在结束之前,它们就立即返回给调用者。另外,对转换组件的方法调用将被忽略

查看我们的 JavaScript 文档以获取更多信息。

.modal(options)

激活您的内容作为模式。接受可选的选项object

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

.modal('toggle')

手动切换模式。返回到之前的模态主叫方实际上已显示或隐藏(IE 浏览器之前shown.bs.modalhidden.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')

销毁一个元素的模态。

活动

Bootstrap 的模态类公开了一些钩住模态功能的事件。所有的模态事件都是在模态本身(即在<div class="modal">)处被触发的。

事件类型

描述

show.bs.modal

当 show instance 方法被调用时,此事件立即触发。如果由于点击而导致点击的元素可用作事件的 relatedTarget 属性。

shown.bs.modal

当模式对用户可见时会触发此事件(将等待 CSS 转换完成)。如果由于点击而导致点击的元素可用作事件的 relatedTarget 属性。

hide.bs.modal

当调用隐藏实例方法时立即触发此事件。

hidden.bs.modal

当模式完成对用户的隐藏时,会触发此事件(等待 CSS 转换完成)。

$('#myModal').on('hidden.bs.modal', function (e) {  // do something...})
上一篇: 下一篇: