浅析BootStrap模态框的使用(经典)


Posted in Javascript onApril 29, 2016

BootStrap模态框简单概述

Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能。您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件)。

1,Bootstrap 模态对话框和简单使用

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();}); //添加合同后,清空表单操作

以上内容是小编给大家介绍的BootStrap模态框的使用,希望对大家有所帮助,欲了解更多精彩内容,敬请关注三水点靠木网站!

Javascript 相关文章推荐
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 #Javascript
JavaScript函数柯里化详解
Apr 29 #Javascript
easyui validatebox验证
Apr 29 #Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 #Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 #Javascript
Bootstrap模态对话框的简单使用
Apr 29 #Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 #Javascript
You might like
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
培养自己的php编码规范
2015/09/28 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
趣味体育活动方案
2014/02/08 职场文书
小松树教学反思
2014/02/11 职场文书
爱护花草树木的标语
2014/06/11 职场文书
关于美容院的活动方案
2014/08/14 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
学习退步检讨书
2014/09/28 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
节水倡议书
2015/01/19 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server