Bootstrap modal使用及点击外部不消失的解决方法


Posted in Javascript onDecember 13, 2016

本文实例为大家分享了Bootstrap modal使用及点击外部不消失的解决方法,供大家参考,具体内容如下

1.代码:

<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>

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

如下代码:

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

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

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

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

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

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

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

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

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

如果要使弹出框点击外部不消失,在触发模态框的组件上添加以下属性 data-backdrop="static"

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" 

<span style="font-family: arial, 宋体, sans-serif, tahoma, 'Microsoft YaHei'; font-size: 14px; line-height: 24px;">

<span style="color:#ff6666;">data-backdrop="static"</span>

</span>> 
</div>

更多内容请点击专题《Bootstrap Modal使用教程》进行学习,希望大家喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6 fixed的完美解决方案
Mar 31 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
详解CocosCreator项目结构机制
Apr 14 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 #Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 #Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 #Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 #Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 #Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 #Javascript
jQuery内存泄露解决办法
Dec 13 #Javascript
You might like
PHP生成静态页面详解
2006/12/05 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
python解析基于xml格式的日志文件
2017/02/25 Python
python制作小说爬虫实录
2017/08/14 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
python 异或加密字符串的实例
2018/10/14 Python
python创建学生成绩管理系统
2019/11/22 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
公司年会演讲稿范文
2014/01/11 职场文书
岗位职责说明书模板
2014/07/30 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript