简介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 相关文章推荐
javascript 控制弹出窗口
Apr 10 Javascript
JS查看对象功能代码
Apr 25 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
node.js实现快速截图
Aug 27 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
Vue自定义指令详解
2017/07/28 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
python正则表达式match和search用法实例
2015/03/26 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python pandas库中的isnull()详解
2019/12/26 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
精灵市场:Pixie Market
2019/06/18 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
Servlet方面面试题
2016/09/28 面试题
学雷锋月活动总结
2014/04/25 职场文书
商铺门面租房协议书
2014/10/21 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
高三语文复习计划
2015/01/19 职场文书
担保贷款承诺书
2015/04/30 职场文书
班级管理经验交流材料
2015/11/02 职场文书