直接上代码：
<!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. Spring Security 入门（1-9）国际化的使用

  2. OAuth2.0学习（1-7）授权方式4-客户端模式（Client Credentials Grant）

    授权方式4-客户端模式(Client Credentials Grant) 客户端模式(Client Credentials Grant)指客户端以自己的名义,而不是以用户的名义,向"服务提 ...

  3. 关于HTML

    我的PHP学习之旅 学习PHP已经有一段时间了,今天才想好好的总结一下这一路走来的点点滴滴,也想把我的学习方法及经验分享给大家,希望能对你有所帮助. 首先学习的是PHP前端部分,这里需要学习的知识有H ...

  4. Vue框架下的node.js安装教程

    Vue框架下的node.js安装教程 python服务器.php  ->aphche.java ->tomcat.   iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...

  5. cache和buffer

    一.free命令是Linux查看内存使用情况的命令 1. centos 7风格 [root@bogon init.d]# free -m total used free shared buff/cac ...

  6. uva 10870

    https://vjudge.net/problem/UVA-10870 题意: f(n) = a1f(n − 1) + a2f(n − 2) + a3f(n − 3) + . . . + adf(n ...

  7. 'NoneType' object is not iterable

    "TypeError: 'NoneType' object is not iterable" 一般是返回值为None同时赋值给了多个变量

  8. 使用Vertx构建微服务

    Vertx Vert.x is a tool-kit for building reactive applications on the JVM.(Vertx是运行在JVM上用来构建reactive ...

  9. hermite矩阵

    在读线代书.因为之前并没有上过线性代数的课.所以决定把基础打牢牢. 读书的时候当然会出现不懂的概念和术语或者定理什么的.所以在这记录一下啦--- hermit矩阵要理解它好像先要知道什么是共轭(con ...

  10. [LeetCode] Minesweeper 扫雷游戏

    Let's play the minesweeper game (Wikipedia, online game)! You are given a 2D char matrix representin ...