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. 嵌入式设备上运行AllJoyn注意事项

    1. 交叉编译AllJoyn库.编译成功后的文件位于:alljoyn-3.3.0-src\build\linux\arm\debug\dist\目录下: 2. 程序要使用AllJoyn,必须要启动al ...

  2. 1.6.3 Uploading Data with Solr Cell using Apache Tika

    1. Uploading Data with Solr Cell using Apache Tika solr使用Apache Tika工程的代码提供了一个框架,用于合并所有不同格式的文件解析器为so ...

  3. PHP面向对象（二）--构造函数与析构函数

    一.构造方法: 构造方法又称为构造函数,是对象被创建时自动调用的方法,用来完成类初始化的工作. 1.构造方法和其他函数一样,可以传递参数,可以设定参数默认值. 2.构造方法可以调用属性,也可以调用方法 ...

  4. ArcMap 查询取位SQL

    shp:substring("XZQDM",7,1)='1' mdb:mid("XZQDM",7,1)='1'

  5. 【开源项目5】测滑菜单MenuDrawer的使用以及解析

    在安卓中左右侧滑菜单的使用用的比ios多得多,可能是谷歌带的头吧,几乎所有的谷歌应用都有侧滑菜单.谷歌没有开放这个源码,在一个成熟的开源代码出现之前,大家都是各自为战,偶尔能看到一个勉强实现了的.Me ...

  6. 【Shell脚本学习3】什么时候使用Shell

    因为Shell似乎是各UNIX系统之间通用的功能,并且经过了POSIX的标准化.因此,Shell脚本只要“用心写”一次,即可应用到很多系统上.因此,之所以要使用Shell脚本是基于: 简单性:Shel ...

  7. Oracle基础（九） Oracle的体系结构

    一.Oracle体系结构概述: Oracle的体系结构是指数据库的组成.工作过程与原理,以及数据在数据库中的组织与管理机制.要了解Oracle数据库的体系结构,必须理解Oracle系统的重要概念和主要 ...

  8. Java Script基础（七） HTML DOM模型

    一.HTML DOM. HTML DOM的特性和方法是专门针对HTML的,HTML中的每个节点都是一个对象,通过访问属性和方法的方式,让一些DOM操作更加简便,在HTML DOM中有专门用来处理白哦个 ...

  9. 【MongoDB】MongoDB服务器搭建(Unix/Linux)

    1.安装MongboDB安装包(开源免费的哟) 在Mac 下 brew install mongoDB 就可以啦 安装要等一会儿,大概200M 2. cd到MongboDB文件夹 - 如果是用home ...

  10. Linux公社资料库地址

    免费下载地址在 http://linux.linuxidc.com/用户名与密码都是http://www.linuxidc.com