模态

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

这个怎么运作

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

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

该组件的动画效果取决于 prefers-reduced-motion 媒体查询。见辅助功能文档中的慢动部分 .

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

例子

模态组件

下面是一个 静态的 模态示例（表示其 position and display 已被覆盖）。包括模态标题,模态主体（必需 padding ）和模式页脚（可选）。我们要求您在可能的情况下在模式标头中包含dismiss操作,或提供另一个显式的dismiss操作。

<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"> 模态标题 </h5>
<button aria-label="Close" class="close" data-dismiss="modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p> 模态文本在这里。 </p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal" type="button"> 关 </button>
<button class="btn btn-primary" type="button"> 保存更改 </button>
</div>
</div>
</div>
</div>

现场演示

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

<button class="btn btn-primary" data-target="#exampleModalLive" data-toggle="modal" type="button"> 启动演示模态 </button>

静态背景

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

<button class="btn btn-primary" data-target="#staticBackdropLive" data-toggle="modal" type="button"> 启动静态背景模态 </button>

滚动长内容

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

Cras mattis consectetur purus坐在发酵罐中。 Cras justo odio,dapibus ac facilisis in,egestas eget quam。 Morbi leo risus,porta ac consectetur ac,eros的前庭。

Prasent commodo cursus magna,vel celesque nisl consectetur等。 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。