您的位置：首页 > Web前端 > BootStrap

bootstrap JavaScript 插件 之 模态框

2016-10-18 21:14 351 查看
JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 
*.js
文件），或者一次性全部引入（使用 
bootstrap.js
或压缩版的 
bootstrap.min.js
）。

建议使用压缩版的 JavaScript 文件

bootstrap.js
和 
bootstrap.min.js
都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。

组件的 data 属性

不要在同一个元素上同时使用多个插件的 data 属性。

模态框 modal.js

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。

不支持模态框重叠

千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。

模态框的 HTML 代码放置的位置

务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

<div>
<a href="" class="btn btn-block btn-primary" data-target="#modals" data-toggle="modal">详细条款</a>
<div class="modal" id="modals">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button">×</button>
<p>详细条款</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
</div >
<div class="modal-footer">
<p>
<button class="btn btn-primary" id="ok">同意</button>
<button class="btn btn-warning" id="no">不同意</button>
</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#modals').modal({
show:true,
keyboard:true,
remote:false,
backdrop:false
})
})
</script>





增强模态框的可访问性

务必为 
.modal
添加 
role="dialog"
属性，
aria-labelledby="myModalLabel"
属性用于只想模态框的标题栏，
aria-hidden="true"
用于通知辅助性工具略过模态框的 DOM元素。

另外，你还应该通过 
aria-describedby
属性为模态框 
.modal
添加描述性信息。

参数

可以将选项通过 data 属性或 JavaScript 代码传递。对于 data 属性，需要将参数名称放到 
data-
之后，例如
data-backdrop=""
。

名称类型默认值描述
backdropboolean 或 字符串 
'static'
trueIncludes a modal-backdrop element. Alternatively, specify 
static
for a backdrop which doesn't close the modal on click.
keyboardbooleantrue键盘上的 esc 键被按下时关闭模态框。
showbooleantrue模态框初始化之后就立即显示出来。
remotepathfalseThis option is deprecated since v3.2.1 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or callingjQuery.load
yourself.

如果提供的是 URL，将利用 jQuery 的 
load
方法从此 URL 地址加载要展示的内容（只加载一次）并插入
.modal-content
内。如果使用的是 data 属性 API，还可以利用
href
属性指定内容来源地址。下面是一个实例：

Copy

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航