Bootstrap2用户指南
5.3.3 选项
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

调用方式

使用方法

选项

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

表 5‑1 Bootstrap模态框插件modal的选项
名称 类型 默认值 说明
backdrop boolean true 模态对话框是否包含一个黑色半透明背景。取值为 false 时,不包含背景;取值为 true 时,包含背景,单击该背景会关闭模态对话框;取值为 static时,包含背景,但单击该背景不会关闭模态对话框。
keyboard boolean true 是否支持按 Esc 键关闭模态对话框。取值 false,表示不支持
show boolean true 初始化时即显示模态对话框
remote path false 如果提供了远程URL地址,就会通过jQuery的 load 方法加载内容,并填充到 .modal-body 中。如果使用data属性,则要使用 href 属性来指定远程URL地址。示例代码如下:<a data-toggle="modal" href="test.html" data-target="#myModal">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 经验