Bootstrap模态对话框的简单使用


Posted in Javascript onApril 29, 2016

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
1、用法
您可以切换模态框(Modal)插件的隐藏内容:
通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。
通过 JavaScript:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:
$('#identifier').modal(options)
2、简单实例

div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<p>对话框主体</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">取消</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>
</div>
</div>

可以使用按钮或链接直接调用模态对话框,这是简单的用法:

<a href="#modal1" role="button" class="btn btn-primary btn-sm" data-toggle="modal">合同添加</a>

另外,当你需要让对话框能够在每次打开时表单数据清空,如下:
$('#modal1').modal('hide');

 $("#modal1").on("hidden", function() {$('#form1')[0].reset();}); //添加合同后,清空表单操作

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
基于jQuery的js分页代码
Jun 10 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 #Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 #Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 #Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 #Javascript
JavaScript String 对象常用方法总结
Apr 28 #Javascript
JavaScript Math 对象常用方法总结
Apr 28 #Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 #Javascript
You might like
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
用js遍历 table的脚本
2008/07/23 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
Python编写单元测试代码实例
2020/09/10 Python
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
linux下进程间通信的方式
2013/01/23 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
保险公司开门红口号
2014/06/21 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
单位提档介绍信
2015/10/22 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
python实现高效的遗传算法
2021/04/07 Python
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python