Bootstrap3 动态模态对话框

动态模态对话框

如果你希望在页面初始状态时不显示模态框，只有在用户点击某个按钮时，再打开隐藏的模态对话框，这也很简单。

首先，在页面上添加一个触发按钮。如：

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

然后，为 .modal 容器追加 .fade类，它会让对话框默认隐藏，并且在打开和关闭时具有淡入淡出效果。如：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<a class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>

此时，点击“Launch demo modal”按钮，就可以打开隐藏的模态对话框。效果如图 4‑2所示：

图4-2 打开隐藏的模态对话框

你有很多方法可以关闭模态框，最简单的方法就是在模态框之外的任何区域点击鼠标。除此之外，你还可以按Esc键，或点击模态框标题栏的小×，或页脚的close按钮。

注意：如果希望能够通过Esc键来关闭模态框，就必须为.modal容器添加 tabindex="-1" 属性。否则，你将无法通过Esc键来关闭模态框。

关于作者

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

Bootstrap3 动态模态对话框相关推荐

Bootstrap3 静态模态对话框
模态对话框 JavaScript内置了 3 种对话框:alert().prompt().confirm().alert() 只是一个简单的提示对话框,prompt() 可以接受用户输入的信息,conf ...
Bootstrap3 模态对话框的事件
模态对话框的事件 Bootstrap为模态对话框插件提供了 5 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 4‑2. 表 4‑2 modal插件的事件及含义事 ...
Bootstrap3 模态对话框的方法
模态对话框的方法 1..modal(options) 使用一个可选的对象参数 options调用模态对话框.如: $('#myModal').modal({ backdrop: false, ...
Bootstrap3 模态对话框的选项
模态对话框的选项 Bootstrap为模态对话框提供了 4 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 4‑1: 表 4‑1 modal插件的选项名称类型默 ...
Bootstrap3 模态对话框的调用方式
模态对话框的调用方式可以通过 data 属性或 JavaScript,让模态框动态显示或隐藏.Bootstrap会为<body>元素添加.modal-open类来覆盖页面默认的滚动行为, ...
Bootstrap3 模态对话框的尺寸
模态对话框的尺寸 Bootstrap为模态框提供了两个尺寸类 .modal-lg和.modal-sm,可以为.modal-dialog增加一个样式类,来调整模态框的尺寸. 如果模态框中的内容比较多,你 ...
自定义tag打包Bootstrap模态对话框并动态加载传值
文章目录 Bootstrap的模态对话框自定义tag文件如下: 加载方法注意事项动态加载的好处 Bootstrap的模态对话框为了复用bootstrap的模态框,将其封装入自定义tag文件中, ...
鸡啄米：模态、非模态对话框
模态对话框: (1)找到视图,添加一个"对话框"资源作为模态对话框(即:插入 Dialog(E)): (2)再给该模态对话框资源在添加类,类名为CTipDlg. 右键新加入的对话框 ...
鸡啄米vc++2010系列11（非模态对话框的创建）
上一节鸡啄米讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 鸡啄米已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.鸡啄米会将 ...

Bootstrap3 动态模态对话框

动态模态对话框

Bootstrap3 动态模态对话框相关推荐

最新文章

热门文章