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. hive和hbase整合的原因和原理

    为什么要进行hive和hbase的整合? hive是高延迟.结构化和面向分析的: hbase是低延迟.非结构化和面向编程的. Hive集成Hbase就是为了使用hbase的一些特性.或者说是中和它们的 ...

  2. iOS7开发中的新特性

        iOS7到现在已经发布了有一段时间了.相信你现在已经了解了它那些开创性的视觉设计,已经了解了它的新的API,比如说SpirteKit,UIKit Dynamics以及TextKit,作为开发者 ...

  3. 计算机网络中的TCP/UDP协议到底是怎么回事（二）

    上一篇博客阐述了TCP/IP五层网络结构模型以及一些关于TCP.UDP的基础知识,这篇博客会接着写一些关于TCP拥塞控制的算法以及对TCP中常有的疑问进行解答. TCP拥塞控制 首先了解几个概念,为下 ...

  4. The Last Practice

    Problem Description Tomorrow is contest day, Are you all ready?We have been training for 45 days, an ...

  5. solr 范围查询

    []表示查询一个包括边界范围, {}表示查询一个不包括边界范围 A TO * 表示没有上界即>=A或是>A ,视使用的是[]还是{}而定 * TO A 表示没有下界即<=A或是< ...

  6. 神马小说：使用opensearch打造高性能搜索服务

    神马小说--- 使用opensearch打造高性能搜索服务 [使用背景] 神马小说是最早使用opensearch的用户,和opensearch一起成长.目前神马小说每天2亿搜索pv,1000w 用户. ...

  7. 基于阿里云ECS的phpwind网站备案前如何远程访问调试？

    基于阿里云ECS的phpwind网站部署非常方便,但云主机的外网IP绑定域名却比较复杂.先要申请域名,成功后还需要备案.尤其是企业网站备案,需要提交的资料较多,准备资料以及审批的时间较长.这段时间在外 ...

  8. 【转】ConcurrentHashMap完全解析（JDK6/7、JDK8）

    转自http://my.oschina.net/hosee/blog/675884 并发编程实践中,ConcurrentHashMap是一个经常被使用的数据结构,相比于Hashtable以及Colle ...

  9. webapp新体验Rem实现移动端网页适配详解资源

    本来想写一篇,webapp使用Rem的问题,查了一下相关rem的介绍之后,发现很多平台已经解释的很清楚了,图文并茂,于是我便想将其解释资源整理一些,方便以后自己查阅. 腾讯ISUX:web app变革 ...

  10. Java中创建操作文件和文件夹的工具类

    Java中创建操作文件和文件夹的工具类 FileUtils.java import java.io.BufferedInputStream; import java.io.BufferedOutput ...