Bootstrap3实用教程
4.3.5 模态对话框的选项
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

模态对话框的调用方式

模态对话框的尺寸

动态模态对话框

静态模态对话框

模态对话框的选项

Bootstrap为模态对话框提供了 4 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置。见表 4‑1:

表 4‑1 modal插件的选项
名称 类型 默认值 说明
backdrop boolean true 模态对话框是否包含一个黑色半透明背景。取值为 false 时,不包含背景;取值为 true 时,包含背景,单击该背景会关闭模态对话框;取值为 static时,包含背景,但单击该背景不会关闭模态对话框。
keyboard boolean true 是否支持按 Esc 键关闭模态对话框。取值 false,表示不支持。
show boolean true 模态框初始化之后就立即显示出来。取值 false,表示不显示。
remote path false 如果提供的是 URL,就会通过 jQuery 的load方法从该URL加载要展示的内容(只加载一次)并填充到.modal-content中。如果使用的是 data 属性 API,则要通过href属性来指定内容来源的URL。如:<a data-toggle="modal" data-target="#myModal" href="test.html">click me</a>

如果使用data属性,则要将选项名称放在 data- 的后面,类似于 data-keyboard="" 的形式。如:

<a data-toggle="modal" data-target="#myModal" data-keyboard="false">Demo</a>

如果使用JavaScript代码,直接使用选项名称即可。如:

<script>
$('#myModal').modal({
  backdrop: false,
  keyboard: false,
  remote: "test.html"
})
</script>

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验