模态
模态-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

Position
Side modal

Position
Central modal

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
是必需的)和模式页脚(可选)。我们要求您包括
模态头,在可能的情况下具有关闭动作,或提供另一个显式关闭
行动。
<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';