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 相关文章推荐
javascript中xml操作实现代码
Nov 21 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
JavaScript Promise 用法
Jun 14 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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之第三天
2006/10/09 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
Python 的类、继承和多态详解
2017/07/16 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Python安装whl文件过程图解
2020/02/18 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
一组SQL面试题
2016/02/15 面试题
医学院校毕业生自荐信范文
2014/01/01 职场文书
办公室副主任职责范本
2014/03/08 职场文书
大学专科求职信
2014/07/02 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
高二语文教学反思
2016/02/16 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang