语气
使用Bootstrap的JavaScript模式插件为您的站点添加灯箱,用户通知或完全自定义内容的对话框
例子
模态组件
下面是一个_static_模态示例(意思是它的position
和display
已被覆盖)。包括模态头,模态体(“填充”所需)和模态页脚(可选)。我们要求您尽可能包含带有解除操作的模态标头,或者提供另一个明确的解除操作
现场演示
单击下面的按钮切换工作模式演示。 它将从页面顶部向下滑动并淡入。
滚动长内容
当模态对于用户的视口或设备变得太长时,它们会独立于页面本身滚动。 试试下面的演示来看看我们的意思。
登录模态
<button class="btn btn-round" data-toggle="modal" data-target="#loginModal">
Login<i class="material-icons">assignment</i>
</button>
<div class="modal fade" id="loginModal" tabindex="-1" role="">
<div class="modal-dialog modal-login" role="document">
<div class="modal-content">
<div class="card card-signup card-plain">
<div class="modal-header">
<div class="card-header card-header-primary text-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="material-icons">clear</i>
</button>
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="#pablo" class="btn btn-just-icon btn-link btn-white">
<i class="fa fa-facebook-square"></i>
</a>
<a href="#pablo" class="btn btn-just-icon btn-link btn-white">
<i class="fa fa-twitter"></i>
<div class="ripple-container"></div></a>
<a href="#pablo" class="btn btn-just-icon btn-link btn-white">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
</div>
<div class="modal-body">
<form class="form" method="" action="">
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons">face</i></div>
</div>
<input type="text" class="form-control" placeholder="First Name...">
</div>
</div>
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons">email</i></div>
</div>
<input type="text" class="form-control" placeholder="Email...">
</div>
</div>
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons">lock_outline</i></div>
</div>
<input type="password" placeholder="Password..." class="form-control">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer justify-content-center">
<a href="#pablo" class="btn btn-primary btn-link btn-wd btn-lg">Get Started</a>
</div>
</div>
</div>
</div>
</div>
注册模式
<button class="btn btn-round" data-toggle="modal" data-target="#signupModal">
<i class="material-icons">assignment</i>
SignUp
</button>
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-signup" role="document">
<div class="modal-content">
<div class="card card-signup card-plain">
<div class="modal-header">
<h5 class="modal-title card-title">Register</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="material-icons">clear</i>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-5 ml-auto">
<div class="info info-horizontal">
<div class="icon icon-rose">
<i class="material-icons">timeline</i>
</div>
<div class="description">
<h4 class="info-title">Marketing</h4>
<p class="description">
We've created the marketing campaign of the website. It was a very interesting collaboration.
</p>
</div>
</div>
<div class="info info-horizontal">
<div class="icon icon-primary">
<i class="material-icons">code</i>
</div>
<div class="description">
<h4 class="info-title">Fully Coded in HTML5</h4>
<p class="description">
We've developed the website with HTML5 and CSS3. The client has access to the code using GitHub.
</p>
</div>
</div>
<div class="info info-horizontal">
<div class="icon icon-info">
<i class="material-icons">group</i>
</div>
<div class="description">
<h4 class="info-title">Built Audience</h4>
<p class="description">
There is also a Fully Customizable CMS Admin Dashboard for this product.
</p>
</div>
</div>
</div>
<div class="col-md-5 mr-auto">
<div class="social text-center">
<button class="btn btn-just-icon btn-round btn-twitter">
<i class="fab fa-twitter"></i>
</button>
<button class="btn btn-just-icon btn-round btn-dribbble">
<i class="fab fa-dribbble"></i>
</button>
<button class="btn btn-just-icon btn-round btn-facebook">
<i class="fab fa-facebook"> </i>
</button>
<h4> or be classical </h4>
</div>
<form class="form" method="" action="">
<div class="card-body">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons">face</i></div>
</div>
<input type="text" class="form-control" placeholder="First Name...">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons">email</i></div>
</div>
<input type="text" class="form-control" placeholder="Email...">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons">lock_outline</i></div>
</div>
<input type="password" placeholder="Password..." class="form-control" />
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
I agree to the <a href="#something">terms and conditions</a>.
</label>
</div>
</div>
<div class="modal-footer justify-content-center">
<a href="#pablo" class="btn btn-primary btn-round">Get Started</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
工具提示和弹出窗口
Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
嵌入YouTube视频
将YouTube视频嵌入到模态中需要额外的JavaScrsipt,而不是在Bootstrap中自动停止播放等等。 [有关详细信息,请参阅此有用的Stack Overflow帖子](https:stackoverflow.com问题18622508 bootstrap-3-and-youtube-in-modal)。
可选尺码
模态有两个可选的大小,可以通过修饰符类放在.modal-dialog
上。这些尺寸在某些断点处起作用,以避免在较窄的视口上出现水平滚动条。
用法
模态插件通过数据属性或JavaScript按需切换隐藏的内容。它还将.modal-open
添加到<body>
以覆盖默认滚动行为并生成一个.modal-backdrop
以提供一个点击区域,用于在模态外部单击时解除显示的模态。
通过数据属性
无需编写JavaScript即可激活模态。在控制器元素上设置data-toggle =“modal”
,如按钮,以及data-target =“#foo”
或href =“#foo”
来定位要切换的特定模态。
通过JavaScript
使用一行JavaScript调用id为“myModal”的模态:
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in 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. |
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. |
如果您想查看更多示例和属性,请查看官方 Bootstrap Documentation.