模态

模态-Bootstrap 5和Material Design 2.0组件

使用MDB模态插件将对话框添加到您的站点，以获取灯箱，用户通知或 完全自定义的内容。

注意：阅读 API 标签以找到所有可用选项，然后 高级定制

基本例子

单击按钮启动模态。


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

          <!-- Modal -->
          <div
            class="modal fade"
            id="exampleModal"
            tabindex="-1"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                  <button
                    type="button"
                    class="btn-close"
                    data-mdb-dismiss="modal"
                    aria-label="Close"
                  ></button>
                </div>
                <div class="modal-body">...</div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
                    Close
                  </button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>

进阶范例

单击按钮以启动模态。

Frame modal

MDB graphics

Position


Side modal

MDB graphics

Position




Central modal

MDB graphics

Size





这个怎么运作

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

  • 使用HTML，CSS和JavaScript构建模态。他们位于其他一切 文档并从 <body> 因此模式内容会滚动。
  • 单击模式“背景”将自动关闭模式。
  • Bootstrap一次仅支持一个模式窗口。我们不支持嵌套模式 认为他们是不良的用户体验。
  • 模态使用 position：fixed ，有时可能对其位置有些特殊 渲染。尽可能将模式HTML放在顶层位置，以避免 来自其他元素的潜在干扰。嵌套广告时，您可能会遇到问题 另一个固定元素中的 .modal 。
  • 再次，由于 position：fixed ，在使用模式时存在一些警告 移动设备。
  • 由于HTML5如何定义其语义， autofocus HTML属性 对Bootstrap模态无效。为了达到相同的效果，请使用一些自定义JavaScript： 

          const myModal = document.getElementById('myModal')
          const myInput = document.getElementById('myInput')

          myModal.addEventListener('shown.mdb.modal', () => {
            myInput.focus()
          })

模态组件

下面是一个 static 模态示例（表示其 position 和 display 已被覆盖）。包括模态标题，模态主体 （对于 padding 是必需的）和模式页脚（可选）。我们要求您包括 模态头，在可能的情况下具有关闭动作，或提供另一个显式关闭 行动。

Modal title

Modal body text goes here.


          <div class="modal" tabindex="-1">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Modal title</h5>
                  <button
                    type="button"
                    class="btn-close"
                    data-mdb-dismiss="modal"
                    aria-label="Close"
                  ></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-mdb-dismiss="modal">
                    Close
                  </button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>

位置 MDB Pro组件

要更改模态的位置，请将以下类别之一添加到 .modal-dialog

Top right: .modal-side + .modal-top-right

Top left: .modal-side + .modal-top-left

Bottom right: .modal-side + .modal-bottom-right

Bottom left: .modal-side + .modal-bottom-right

注意：如果要更改模式动画的方向，请添加类 .top ， .right ， bottom 或 .left 到 .modal div。

帧 MDB Pro组件

要使模态“类似框架”将 .modal-frame 类添加到 .modal-dialog 元素。您还需要通过添加来指定方向 .modal-bottom 或 .modal-top 到 .. modal-dialog 。

静态背景

当背景设置为静态时，在其外部单击时，模式不会关闭。点击 请点击下面的按钮进行尝试。


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

          <!-- Modal -->
          <div
            class="modal fade"
            id="staticBackdrop"
            data-mdb-backdrop="static"
            data-mdb-keyboard="false"
            tabindex="-1"
            aria-labelledby="staticBackdropLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                  <button
                    type="button"
                    class="btn-close"
                    data-mdb-dismiss="modal"
                    aria-label="Close"
                  ></button>
                </div>
                <div class="modal-body">...</div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
                    Close
                  </button>
                  <button type="button" class="btn btn-primary">Understood</button>
                </div>
              </div>
            </div>
          </div>

滚动长内容

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

您还可以创建一个可滚动的模态，该模态允许通过添加 .modal-dialog-scrollable 到 .modal-dialog 。


          <!-- Scrollable modal -->
          <div class="modal-dialog modal-dialog-scrollable">...</div>

垂直居中

将 .modal-dialog-居中添加到 .modal-dialog 中以垂直居中 模态


          <!-- Vertically centered modal -->
          <div class="modal-dialog modal-dialog-centered">...</div>

          <!-- Vertically centered scrollable modal -->
          <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">...</div>

工具提示和弹出窗口

工具提示 和 约夏克布丁 可以放在模态中 需要。关闭模态后，其中的任何工具提示和弹出框也会自动显示 解雇。 


          <div class="modal-body">
            <h5>Popover in a modal</h5>
            <p>
              This
              <a
                href="#!"
                role="button"
                class="btn btn-secondary popover-test"
                data-mdb-toggle="popover"
                title="Popover title"
                data-mdb-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" data-mdb-toggle="tooltip" title="Tooltip"
                >This link</a
              >
              and
              <a href="#!" class="tooltip-test" data-mdb-toggle="tooltip" title="Tooltip"
                >that link</a
              >
              have tooltips on hover.
            </p>
          </div>

使用网格

通过嵌套在模态内利用Bootstrap网格系统 .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 ms-auto">.col-md-4 .ms-auto</div>
              </div>
              <div class="row">
                <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
                <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
              </div>
              <div class="row">
                <div class="col-md-6 ms-auto">.col-md-6 .ms-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-mdb-* 属性 根据单击哪个按钮来更改模态的内容。

下面是一个实时演示，后面是示例HTML和JavaScript。有关更多信息，请阅读 有关 relatedTarget 的详细信息，请使用模式 API /事件文档。


          <button
            type="button"
            class="btn btn-primary"
            data-mdb-toggle="modal"
            data-mdb-target="#exampleModal"
            data-mdb-whatever="@mdo"
          >
            Open modal for @mdo
          </button>
          <button
            type="button"
            class="btn btn-primary"
            data-mdb-toggle="modal"
            data-mdb-target="#exampleModal"
            data-mdb-whatever="@fat"
          >
            Open modal for @fat
          </button>
          <button
            type="button"
            class="btn btn-primary"
            data-mdb-toggle="modal"
            data-mdb-target="#exampleModal"
            data-mdb-whatever="@getbootstrap"
          >
            Open modal for @getbootstrap
          </button>

          <div
            class="modal fade"
            id="exampleModal"
            tabindex="-1"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                  <button
                    type="button"
                    class="btn-close"
                    data-mdb-dismiss="modal"
                    aria-label="Close"
                  ></button>
                </div>
                <div class="modal-body">
                  <form>
                    <div class="mb-3">
                      <label for="recipient-name" class="col-form-label">Recipient:</label>
                      <input type="text" class="form-control" id="recipient-name" />
                    </div>
                    <div class="mb-3">
                      <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-mdb-dismiss="modal">
                    Close
                  </button>
                  <button type="button" class="btn btn-primary">Send message</button>
                </div>
              </div>
            </div>
          </div>
        

          const exampleModal = document.getElementById('exampleModal')
          exampleModal.addEventListener('show.mdb.modal', (event) => {
            // Button that triggered the modal
            const button = event.relatedTarget
            // Extract info from data-mdb-* attributes
            const recipient = button.getAttribute('data-mdb-whatever')
            // If necessary, you could initiate an AJAX request here
            // and then do the updating in a callback.
            //
            // Update the modal's content.
            const modalTitle = exampleModal.querySelector('.modal-title')
            const modalBodyInput = exampleModal.querySelector('.modal-body input')

            modalTitle.textContent = `New message to ${recipient}`
            modalBodyInput.value = recipient
          })

变更动画

的 $modal-fade-transform 变量确定的变换状态 .modal-dialog 在模式淡入动画之前， $modal-show-transform 变量确定 .modal-dialog 在模式淡入动画的末尾。

例如，如果要放大动画，可以设置 $modal-fade-transform：scale（.8）。

删除动画

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


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

动态高度

如果模态的高度在打开时发生变化，则应调用 myModal.handleUpdate（）以在滚动条的情况下重新调整模式的位置 出现。

辅助功能

确保添加aria-labelledby="...", 引用模式标题 .modal.此外，您可以使用 aria-describedby上 .modal. 请注意，您不需要添加 role="dialog"因为我们已经通过JavaScript添加了它。

嵌入YouTube视频

以模态形式嵌入YouTube视频需要Bootstrap中没有的其他JavaScript来 自动停止播放等等。 看到这篇有用的Stack Overflow帖子 欲获得更多信息。

可选尺寸

模态具有三种可选尺寸，可通过修饰符类将其放置在 .modal-dialog 。这些大小会在某些断点处插入，以避免水平 缩小视口上的滚动条。

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

          <div class="modal-dialog modal-xl">...</div>
          <div class="modal-dialog modal-lg">...</div>
          <div class="modal-dialog modal-sm">...</div>

全屏模式

另一个替代方法是弹出包含用户视口的模态的选项，可通过 放在 .modal-dialog 上的修饰符类。

Class Availability
.modal-fullscreen Always
.modal-fullscreen-sm-down Below 576px
.modal-fullscreen-md-down Below 768px
.modal-fullscreen-lg-down Below 992px
.modal-fullscreen-xl-down Below 1200px
.modal-fullscreen-xxl-down Below 1400px 

          <!-- Full screen modal -->
          <div class="modal-dialog modal-fullscreen-sm-down">...</div>

模态 - API

用法

模态插件通过数据属性或JavaScript按需切换隐藏的内容。它 还将 .modal-open 添加到 <body>覆盖默认 滚动行为并生成一个 .modal-backdrop 来为 在模态外部单击时，关闭显示的模态。

通过数据属性

无需编写JavaScript即可激活模式。组 data-mdb-toggle="modal" 在控制器元素（如按钮）上，以及 data-mdb-target="#foo" or href="#foo" 针对特定的模式 切换。 


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

通过JavaScript

用一行JavaScript创建一个模态：


          const myModal = new mdb.Modal(document.getElementById('myModal'), options)

选件

可以通过数据属性或JavaScript传递选项。对于数据属性，请附加 选项名称为 data-mdb-，如 data-mdb-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.
keyboard boolean true Closes the modal when escape key is pressed
focus boolean true Puts the focus on the modal when initialized.

方法

异步方法和转换：
所有API方法都是异步并开始过渡。 转换开始后，他们会立即返回给呼叫者，但 在结束之前。另外，在 转换组件将被忽略。

传递选项

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

Method Description
dispose Destroys an element’s modal.
getInstance Static method which allows you to get the modal instance associated with a DOM element
handleUpdate Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
hide Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.mdb.modal event occurs).
show Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.mdb.modal event occurs).
toggle Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.mdb.modal or hidden.mdb.modal event occurs). 

          const myModalEl = document.getElementById('myModal')
          const modal = new mdb.Modal(myModalEl)
          modal.show()

大事记

Bootstrap的模态类公开了一些事件，可以挂接到模态功能上。全模态 事件会向模式本身触发（即 <div class="modal">).

Event type Description
show.mdb.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.mdb.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.mdb.modal This event is fired immediately when the hide instance method has been called.
hidden.mdb.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.mdb.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 with the keyboard option or data-mdb-keyboard set to false. 

          const myModalEl = document.getElementById('myModal')
          myModalEl.addEventListener('hidden.mdb.modal', (event) => {
            // do something...
          })

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件：


        import { Modal } from 'mdb-ui-kit';