简介BootStrap model弹出框的使用
更新时间：2016年04月27日 10:02:56 作者：James wang
这篇文章主要介绍了BootStrap model弹出框的使用，介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧
之前，我们讲解了bootstrap tab的使用，今天我们来了解下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弹出框的使用，希望对大家有所帮助！
相关文章
类型断言是一种方式，可以手动指定变量的类型，非空断言是一种类型断言的特殊形式，这篇文章主要给大家介绍TypeScript 中的类型断言和非空断言的使用方法,需要的朋友可以参考下2023-07-07
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
KeyDown、KeyPress和KeyUp事件的区别与联系,以后就可以根据需求来选择使用。2009-12-12
这篇文章主要介绍了js对图片base64编码字符串进行解码并输出图像的具体实现，大家可以参考下面的示例2014-03-03
这篇文章主要介绍了JavaScript中layim之整合右键菜单的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
在本章中，我们将分析Prototypejs中关于JavaScript继承的实现,需要的朋友可以参考下2016-10-10
获取要替换的节点,这种方法只适用于IE浏览器以及适用于各种浏览器的写法，感兴趣的朋友可以参考下哈2013-04-04
这篇文章为大家主要介绍了js获取url参数值的几种方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-07-07
element-table表格中插入颜色块显示数据状态的示例代码
这篇文章主要介绍了element-table表格中插入颜色块显示数据状态,代码部分分为dom部分和data部分及css部分,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
下面小编就为大家带来一篇js获取css的各种样式并且设置他们的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家详细介绍了小程序实现抽奖动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
最新评论