Bootstrap模态框插件

缺乏、安全感 2022-06-12 05:57 398阅读 0赞

模态框插件:交互式网站常见的弹框功能插件

一、基本使用:

使用模态框的弹窗组件需要三层div容器元素:

  • modal(模态声明层)
  • dialog(窗口声明层)
  • body(主体)
  • footer(注脚)

效果图:
效果图

如果模态框(modal)不设置tabindex=”-1”,可以通过tab键切换除模态框外的其他元素的焦点,模态框设置了tabindex=’-1’,tab键只能切换模态框内的元素的焦点。

如果想让模态框自动隐藏,然后通过点击按钮弹窗,那么需要如下操作:

  1. <!-- 模态框去掉 show,增加一个 id -->
  2. <div class="modal fade" id="myModal" tabindex="-1">
  3. <!-- 点击按钮触发模态框显示 -->
  4. <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

  1. //表示触发类型
  2. data-toggle="modal"
  3. //表示触发的节点
  4. 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 的方法
  1. //空白背景且点击不关闭
  2. data-backdrop="false"
  3. //按下 esc 不关闭
  4. data-keyboard="false"
  5. //初始化隐藏,如果是按钮点击触发,第一次点击则无法显示,第二次显示。
  6. data-show="false"
  7. //加载一次 index.html 到容器内
  8. href="index.html"

也可以在javascript直接设置




































属性名称 类型 默认值 描述
backdrop 布尔值或’static’ true 默认值 true,表示背景存在黑灰透明遮罩,且单击空白背景可关闭弹窗;如果为 false,表示背景不存在黑灰透明遮罩,且点击空白背景不可关闭弹窗;如果是字符串’static’,表示背景存在黑灰透明遮罩,且点击空白不可关闭弹窗。
keyboard 布尔值 true 如果是 true,按 esc 键会关闭窗口;如果是 false,按 esc 键会不会关闭。
show 布尔值 true 如果是 true,初始化时,默认显示;如果是 false,初始化时,默认隐藏
remote url路径 空值 远程获取指定内容填充到modal-content容器中
  1. $('#myModal').modal({
  2. show : true,
  3. backdrop : false,
  4. keyboard : false,
  5. remote : 'index.html',
  6. });

方法:如果不默认显示弹窗,怎样才能通过点击前后弹窗?


























参数名称 使用方法 描述
toggle .modal(‘toggle’) 触发时,反转切换弹窗状态
show .modal(‘show’) 触发时,显示弹窗
hide ,modal(‘hide’) 触发时,关闭弹窗
  1. //点击显示弹窗
  2. $('#btn').on('click', function () {
  3. $('#myModal').modal('show');
  4. });

事件:模态框支持 4 种事件,分别对应弹出前、弹出后、关闭前和关闭后






























事件类型 描述
show.bs.modal 在 show 方法调用时立即触发
shown.bs.modal 在模态框完全显示出来,并且等 CSS 动画完成之后触发
hide.bs.modal 在 hide 方法调用时,但还未关闭隐藏时触发。
hidden.bs.modal 在模态框完全隐藏之后,并且等 CSS 动画完成之后触发
loaded.bs.modal 在远程数据加载完毕后触发。加载页面时远程数据也被加载完毕

发表评论

表情:
评论列表 (有 0 条评论,398人围观)

还没有评论,来说两句吧...

相关阅读