backdrop选项，当设置成false的时候, 背景不会出现半透明的遮盖层，当用户点击模态框外部时不会关闭模态框； 设置成true的时候会出现遮盖层，当用户点击模态框外部时则会关闭模态框。

那如果又想有这个遮盖的效果，但是又不想用户点击模态框外部时关闭模态框，该怎么弄能？其实这个遮盖层就是加了一个DIV. (<div class="modal-backdrop  in"></div>)

我们可以把backdrop设置成false，然后直接加上这个DIV就可以了。

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 模态框（Modal）插件事件</title>

   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

</head>

<body>

<h2>模态框（Modal）插件事件</h2>

<!-- 按钮触发模态框 -->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

   开始演示模态框

</button>

<!-- 模态框（Modal） -->

<div class="modal" id="myModal" tabindex="-1" role="dialog" data-backdrop="false" data-keyboard="false" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-backdrop  in"></div>

   <div class="modal-dialog">

      <div class="modal-content">

         <div class="modal-body">

            点击关闭按钮检查事件功能。

         </div>

         <div class="modal-footer">

            <button type="button" class="btn btn-default"

               data-dismiss="modal">

               关闭

            </button>

            <button type="button" class="btn btn-primary">

               提交更改

            </button>

         </div>

      </div><!-- /.modal-content -->

   </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

<script>

   $(function () { $('#myModal').modal('hide')})});

</script>

</body>

</html>

Bootstrap模态框的更多相关文章

  1. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  2. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  3. 解决bootstrap模态框内输入框无法获取焦点

    bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可

  4. Bootstrap 模态框（Modal）插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  5. Bootstrap 模态框在用户点击背景空白处时会自动关闭

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

  6. Bootstrap模态框（MVC）

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

  7. 去除bootstrap模态框半透明阴影

    当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...

  8. Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框

    父页面bootstrap模态框: <div class="modal fade" id="myModal" tabindex="-1" ...

  9. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  10. BootStrap 模态框基本用法

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态框(Modal)插件方法</title ...

随机推荐

  1. NSNotificationCenter 使用姿势详解

    来源:JamesYu 链接:http://www.jianshu.com/p/a4d519e4e0d5 最近在做平板的过程中,发现了一些很不规范的代码.偶然修复支付bug的时候,看到其他项目代码,使用 ...

  2. ios -几种常见定时器

    转自cocoachina 网友分享: http://mp.weixin.qq.com/s?__biz=MjM5OTM0MzIwMQ==&mid=206637839&idx=7& ...

  3. How to make remote key fob for 2002 BMW 3 series

    Here share with you on how to make remote key fob for 2002 BMW 3 series: Method 1: 1. Working within ...

  4. css中内容生成器

    一,内容生成器:content 补充before和after伪类选择器: 1):将内容添加到某个选择器定义的单个或者多个元素的每一个实例之前或者之后 2)与before选择器配合使用(同理大家想下会不 ...

  5. iOS - 导航控制器

    1.导航控制器 self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; self.window.bac ...

  6. Oracle基础 exp/imp和expdp/impdp的区别：

    一.exp/imp和expdp/impdp在功能上的区别: 1.把用户usera的对象导入到userb emp/imp用法: formuser=usera touser=userb; empdp/im ...

  7. 关于TransactionScope出错：“与基础事务管理器的通信失败”的解决方法总结

    遇到此问题先需确认几个问题: 1)MS DTC是否设置正确? 2)是否启用了防火墙?是否对DTC做了例外? 3)是否做了hosts映射?是否跨网域通信? 开发分布式事务,碰到一个错误“与基础事务管理器 ...

  8. ibatis mysql replace into 返回ID

    目前只能在replace into 之后,重新查询数据

  9. css3 text-transform变形动画

    详细内容请点击 版本:CSS1 兼容性:IE4+ NS4+ 继承性:有 语法: text-transform : none | capitalize| uppercase| lowercase 参数: ...

  10. sql的基本用法-------修改字段默认值和属性

    修改表中已有的字段属性 ALTER TABLE 表名 ALTER COLUMN 字段名 varchar(500) --sqlserver建表表时设置字段的默认值 create table 表(id i ...