浅析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 相关文章推荐
Extjs入门之动态加载树代码
Apr 09 Javascript
js日期联动示例
May 02 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
php函数连续调用实例分析
2015/07/30 PHP
php实现等比例压缩图片
2018/07/26 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
中英文自我评价语句
2013/12/20 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
会议主持词开场白
2015/05/28 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android