简介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图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
javascript对象的创建和访问
Mar 08 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 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:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
Mac地址验证的javascript代码
2013/11/09 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
python开发中range()函数用法实例分析
2015/11/12 Python
Python人脸识别初探
2017/12/21 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
创联软件面试题笔试题
2012/10/07 面试题
毕业生求职自荐书范文
2014/03/27 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
抗洪救灾标语
2014/10/08 职场文书