浅析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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
js实现二级联动简单实例
Jan 11 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
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
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
详解python 注释、变量、类型
2018/08/10 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
Python库安装速度过慢解决方案
2020/07/14 Python
巴西购物网站:Submarino
2020/01/19 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
境外导游求职信
2014/02/27 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python