简介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 相关文章推荐
js刷新框架子页面的七种方法代码
Nov 20 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
js 数据类型判断的方法
Dec 03 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
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
JS 统计时间
2021/03/09 Javascript
JQuery live函数
2010/12/24 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
微信小程序实现多图上传
2020/06/19 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python实现的HTTP并发测试完整示例
2020/04/23 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
幼儿园校车司机的岗位职责
2014/01/30 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
基层党支部承诺书
2015/04/30 职场文书
初婚未育证明样本
2015/06/18 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
新闻通讯稿范文
2015/07/22 职场文书
《法国号》教学反思
2016/02/22 职场文书