直接上代码：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

        <title>影音先锋</title>

        <!-- Bootstrap -->

        <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css">

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

        <!--<script src="js/jquery.min.js"></script>-->

        <script src="js/jquery-2.1.4.min.js"></script>

        <!-- Include all compiled plugins (below), or include individual files as needed -->

        <script src="js/bootstrap.min.js"></script>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

        <!--[if lt IE ]>

          <script src="js/adaptIE/html5shiv.min.js"></script>

          <script src="js/adaptIE/respond.min.js"></script>

        <![endif]-->

        <style>

        </style>

    </head>

    <body>

        <div class="container-fluid text-center">

            <h2>遮罩层DEMO</h2>

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

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

               打开遮罩层

        </button>

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

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

                <div class="modal-dialog">

                    <div class="modal-content">

                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">

                  &times;

            </button>

                            <h4 class="modal-title" id="myModalLabel">

                  遮罩层标题

            </h4>

                        </div>

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

            </div>

    </body>

</html>
 

Bootstrap 遮罩层实现方式的更多相关文章

  1. Jquery超简单遮罩层实现代码

    看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式: 1.样式如下设置: CSS代码: <style type="text/css"> .mask { pos ...

  2. 【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

    刚才在写一个界面,其中为了考虑背景图片的缘故,所以没用Button而是用的a标签 在点击之后应该禁用掉a元素,禁用对于button比较容易,加一个disabled就可以了 但是对于a却没有太好的办法, ...

  3. 转【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

    /*遮罩层代码 作用:通过遮罩层的方式防止表单提交次数过多 */ function MaskIt(obj){ var hoverdiv = '<div class="divMask&q ...

  4. bootstrap添加遮罩层loadingmask

    转自:https://blog.csdn.net/baidu_30809315/article/details/83900255 gif动态图下载地址:http://blog.sina.com.cn/ ...

  5. htnl中的遮罩层以及定位方式

    在页面显示遮罩层,例如:一个div的css样式: $msk.css({ "top":"0", "left":"0", & ...

  6. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  7. 基于bootstrap模态框、fakeLoader实现全局遮罩层

    一.fakeLoader.js介绍 fakeLoader.js 是轻量级的 jQuery 插件,帮助你创建动态的全屏加载掩饰微调效果,模拟页面预加载的效果. 插件下载地址:https://github ...

  8. Bootstrap.之模态框 显示在遮罩层后面

    Bootstrap.之模态框 显示在遮罩层后面 问题描述: 在使用bootstrap模态框,弹出的窗口在遮罩层后面,见图: 解决方案: 保证模态框的代码,所在的上一级(父元素)是body标签,即可.例 ...

  9. 页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理

    实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色 ...

随机推荐

  1. 新概念英语（1-32）A fine day

    新概念英语(1-33)A fine day Where is the Jones family? It is a fine day today. There are some clouds in th ...

  2. Node.js初探之实现能向前台返回东西的简单服务器

    nodejs nodejs文件就是一个简单的js文件. 在shell中运行 Step 1. 打开终端,进入这个js文件所在目#录 Step 2. 用 'node 文件名.js' 命令运行它即可. 用n ...

  3. 翻译：JVM虚拟机规范1.7中的运行时常量池部分（二）

    本篇为JVM虚拟机规范1.7中的运行时常量池部分系列的第二篇. 4.4.4. The CONSTANT_Integer_info and CONSTANT_Float_info Structures ...

  4. 基于UDP协议的控制台聊天程序（c++版）

    本博客由Rcchio原创,转载请告知作者 ------------------------------------------------------------------------------- ...

  5. Java-NIO（八）：DatagramChannel

    Java NIO中的DatagramChannel是一个能收发UDP包的通道.操作步骤: 1)打开 DatagramChannel 2)接收/发送数据 同样它也支持NIO的非阻塞模式操作,例如: @T ...

  6. C# 获取网页源代码

    /// <summary> /// 获取网页源代码 /// </summary> /// <param name="url"></para ...

  7. [Other] Nuget 构建服务器与常用命令

    公司出于某些原因需要自己在内部网络搭建一个私有的 Nuget 服务器,而且要运行在 Linux服务器上面.如果说 Windows 下搭建的话很简单,直接在项目当中引入 Nuget 的库就 OK,这儿的 ...

  8. 【webstorm使用手册】如何让webstorm支持nextcss基础语法？

    第一步, 安装 PostCss插件 如果不知道如何安装插件,参看:http://www.cnblogs.com/codelovers/p/7048113.html 第二步,设置文件类型解析方式 打开F ...

  9. python3进阶之推导式之列表（list）推导式（comprehensions）

    1.前言 推导式,英文名字叫comprehensions,注意与comprehension(理解)只有s字母之差.推导式又可以叫解析式,推导式可以从一种数据序列构建新的数据序列的结构体.推导式分为,列 ...

  10. 深入探索.NET框架内部了解CLR如何创建运行时对象

    原文地址:http://msdn.microsoft.com/en-us/magazine/cc163791.aspx 原文发布日期: 9/19/2005 原文已经被 Microsoft 删除了,收集 ...