Bootstrap模态框

时间：2021-12-23 10:02:06

Bootstrap模态框

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 模态框 &plus; iframe &gt&semi; 打开子页面 &gt&semi; 数据传输&sol;关闭模态框

    父页面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. Json序列化与反序列化

    参考:http://www.cnblogs.com/caofangsheng/p/5687994.html#commentform 下载链接:http://download.csdn.net/deta ...

  2. Bencode的编码与解码

    开源地址: https://github.com/CreateChen/Bencode Nuget: Install-Package Bencode 1. Bencode规则 BEncoding是Bi ...

  3. git大百科

    1,命令: git忽略提交文件:git rm --cache .idea/workspace.xml 因为你已经把他加到tracked file里了 用 git rm --cached java/.i ...

  4. Maven如何手动添加jar包到本地Maven仓库

    Apache Maven,是一个软件(特别是Java软件)项目管理及自动构建工具,由Apache软件基金会所提供.基于项目对象模型(缩写:POM)概念,Maven利用一个*信息片断能管理一个项目的构 ...

  5. 安装Ambari

    1.yum install pdsh    这玩意一般系统都没带 2.检查下umask码,022是需要的 3.获取ambari的官方repo文件,并安装repo文件 wget http://publi ...

  6. IOS开发调整UILabel的行间距

    CGFloat heih = 20;   NSString * cLabelString = @"这是测试UILabel行间距的text.这是测试UILabel行间距的text.n 这是测试 ...

  7. 腾讯云H5语音通信QoE优化

    本文首发在云+社区,未经许可,不得转载. 云+导语:4月21日,腾讯云+社区在京举办"'音'你而来,'视'而可见--音视频技术开发实战沙龙",腾讯音视频实验室高级工程师张轲围绕网络 ...

  8. &lbrack;翻译&rsqb;Protocol Buffer 基础&colon; C&plus;&plus;

    目录 Protocol Buffer Basics: C++ 为什么使用 Protocol Buffers 在哪可以找到示例代码 定义你的协议格式 编译你的 Protocol Buffers Prot ...

  9. Spring使用ajax异步上传文件

    单文件上传 <!-- 创建文件选择框 --> 文件上传 :<input type="file" id="file" name="fi ...

  10. vue从入门到进阶：vue-router路由功能（九）

    基本使用 html: <script src="https://unpkg.com/vue/dist/vue.js"></script> <scrip ...

相关文章