Bootstrap模态框插件
模态框插件:交互式网站常见的弹框功能插件
一、基本使用:
使用模态框的弹窗组件需要三层div容器元素:
- modal(模态声明层)
- dialog(窗口声明层)
- body(主体)
footer(注脚)
效果图:
如果模态框(modal)不设置tabindex=”-1”,可以通过tab键切换除模态框外的其他元素的焦点,模态框设置了tabindex=’-1’,tab键只能切换模态框内的元素的焦点。
如果想让模态框自动隐藏,然后通过点击按钮弹窗,那么需要如下操作:
<!-- 模态框去掉 show,增加一个 id -->
<div class="modal fade" id="myModal" tabindex="-1">
<!-- 点击按钮触发模态框显示 -->
<button class="btn btn-primary btn-lg" id="btn" data-toggle="modal" data-target="#myModal">点击弹窗</button>
二、用法说明
所有插件都是基于Javascript/jQuery的,那么就有四个要素:用法、参数、方法和事件。
用法:通过data属性,如果不是使用button,而是a,其中的data-target也可以使用href=”#myModal”取代,建议使用data-target
//表示触发类型
data-toggle="modal"
//表示触发的节点
data-target="#myModal"
参数:通过在HTML元素上设置data-*的属性声明来控制效果。
属性名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
data-backdrop | 布尔值或’static’ | true | 默认值 true,表示背景存在黑灰透明遮罩,且单击空白背景可关闭弹窗;如果为 false,表示背景不存在黑灰透明遮罩,且点击空白背景不可关闭弹窗;如果是字符串’static’,表示背景存在黑灰透明遮罩,且点击空白不可关闭弹窗。 |
data-keyboard | 布尔值 | true | 如果是 true,按 esc 键会关闭窗口;如果是 false,按 esc 键会不会关闭。 |
data-show | 布尔值 | true | 如果是 true,初始化时,默认显示;如果是 false,初始化时,默认隐藏 |
href | url路径 | true | 如果值不是以#号开头,则表示一个url 地址,加载 url 内容到modal-content 容器里,并只加载一次。如果是#号,就是取代data-target 的方法 |
//空白背景且点击不关闭
data-backdrop="false"
//按下 esc 不关闭
data-keyboard="false"
//初始化隐藏,如果是按钮点击触发,第一次点击则无法显示,第二次显示。
data-show="false"
//加载一次 index.html 到容器内
href="index.html"
也可以在javascript直接设置
属性名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
backdrop | 布尔值或’static’ | true | 默认值 true,表示背景存在黑灰透明遮罩,且单击空白背景可关闭弹窗;如果为 false,表示背景不存在黑灰透明遮罩,且点击空白背景不可关闭弹窗;如果是字符串’static’,表示背景存在黑灰透明遮罩,且点击空白不可关闭弹窗。 |
keyboard | 布尔值 | true | 如果是 true,按 esc 键会关闭窗口;如果是 false,按 esc 键会不会关闭。 |
show | 布尔值 | true | 如果是 true,初始化时,默认显示;如果是 false,初始化时,默认隐藏 |
remote | url路径 | 空值 | 远程获取指定内容填充到modal-content容器中 |
$('#myModal').modal({
show : true,
backdrop : false,
keyboard : false,
remote : 'index.html',
});
方法:如果不默认显示弹窗,怎样才能通过点击前后弹窗?
参数名称 | 使用方法 | 描述 |
---|---|---|
toggle | .modal(‘toggle’) | 触发时,反转切换弹窗状态 |
show | .modal(‘show’) | 触发时,显示弹窗 |
hide | ,modal(‘hide’) | 触发时,关闭弹窗 |
//点击显示弹窗
$('#btn').on('click', function () {
$('#myModal').modal('show');
});
事件:模态框支持 4 种事件,分别对应弹出前、弹出后、关闭前和关闭后
事件类型 | 描述 |
---|---|
show.bs.modal | 在 show 方法调用时立即触发 |
shown.bs.modal | 在模态框完全显示出来,并且等 CSS 动画完成之后触发 |
hide.bs.modal | 在 hide 方法调用时,但还未关闭隐藏时触发。 |
hidden.bs.modal | 在模态框完全隐藏之后,并且等 CSS 动画完成之后触发 |
loaded.bs.modal | 在远程数据加载完毕后触发。加载页面时远程数据也被加载完毕 |
还没有评论,来说两句吧...