浅析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 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
点图片上一页下一页翻页效果
Jul 09 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
学习JS中的DOM节点以及操作
2018/04/30 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
Python中bisect的使用方法
2019/12/31 Python
python 异步async库的使用说明
2020/05/04 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
应届实习生的自我评价范文
2014/01/05 职场文书
学期自我评价
2014/01/27 职场文书
仓库组长岗位职责
2014/01/29 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
小学教师年度个人总结
2015/02/05 职场文书
社区党员干部承诺书
2015/05/04 职场文书
关于空气污染危害的感想
2015/08/11 职场文书