简介BootStrap model弹出框的使用


Posted in Javascript onApril 27, 2016

之前,我们讲解了bootstrap tab的使用,今天我们来了解下bootstrap 中model弹出窗的使用。

效果:

简介BootStrap model弹出框的使用

代码:

<input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx"/>
<!-- Modal -->
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body"></div>
</div>

很简单吧,这样就可以了。

注意:data-target属性,指向了model的id,所以点击按钮,model就会弹出来了。

当然你也可以用js来控制。

如下代码:

显示:$('#myModal').modal('show');

隐藏:$('#myModal').modal('hide');

开关:$('#myModal').modal('toogle');

事件: $('#myModal').on('hidden', function () {// do something…});

注意:我这边用到了href属性,这是让model去 remote一个url。当然 ,你可以把你要的内容,直接写在model-body里面。

认真看model的div结构,你就会明白,model-body是代表内容,model-header是头部,那么如果要在底部加两个按钮,那么就得用下面的代码了。

<div class="modal-footer">
<a href="#" class="btn">关闭</a>
<a href="#" class="btn btn-primary">保存</a>
</div>

注意:如果要给model设置宽度,那必须得加上布局。就是把model放在下面的代码块中,并且设置model的宽度。style="width:500px".对了,你还不可以用span样式直接放到class里面。。

<div class="container"></div>

以上所述是小编给大家介绍的BootStrap model弹出框的使用,希望对大家有所帮助!

Javascript 相关文章推荐
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 #Javascript
javascript实现延时显示提示框特效代码
Apr 27 #Javascript
JS延时器提示框的应用实例代码解析
Apr 27 #Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 #Javascript
requireJS使用指南
Apr 27 #Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 #Javascript
浏览器兼容的JS写法总结
Apr 27 #Javascript
You might like
php.ini 中文版
2006/10/28 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
PHP7 其他修改
2021/03/09 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
JS 建立对象的方法
2007/04/21 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
canvas知识总结
2017/01/25 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python中线程编程之threading模块的使用详解
2015/06/23 Python
django Admin文档生成器使用详解
2019/07/22 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
学期研究性学习个人的自我评价
2014/01/09 职场文书
生物学专业求职信
2014/07/23 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
组织委员竞选稿
2015/11/21 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python