直接上代码：
<!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. 阿里云API网关（4）快速入门（开放 API）

    网关指南: https://help.aliyun.com/document_detail/29487.html?spm=5176.doc48835.6.550.23Oqbl 网关控制台: https ...

  2. 新概念英语（1-39）Don't drop it!

    新概念英语(1-39)Don't drop it! Where does Sam put the vase in the end ? A:What are you going to do with t ...

  3. Python/模块与包之模块

    Python/模块与包之模块 1.什么是模块? 模块就是py文件 2.为什么要用模块? 如果在解释器上进行编码,把解释器关闭之前写的文件就不存在了,如果使用模块的话就能永久保存在磁盘中. 3.如何使用 ...

  4. jacascript 原生选项卡插件

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 在布局的时候,想到了很多以前看到过的案例,再次熟悉一下: a链接之间的竖线:可以用a链接的border-r ...

  5. WPF Command

    使用CustomControl时绑定Command用法 C# Part public static RoutedUICommand ClearCommand { get; private set; } ...

  6. Logistic Regression vs Naive Bayes

    相同 逻辑回归和朴素贝叶斯都是对条件概率\(P(X|y)\)进行建模,使得最终的分类结果有很好的解释性. 不同 具体流程 逻辑回归: 假设\(P(y=1|X)\)满足逻辑函数\(h(z)=1/1+ex ...

  7. 【实验吧】CTF_Web_登录一下好吗？

    实验吧CTF---Web篇 1. 打开登录地址(http://ctf5.shiyanbar.com/web/wonderkun/web/index.html),发现为一个登录界面,第一想到的是查看源代 ...

  8. [LOJ 6248]「CodePlus 2017 11 月赛」晨跑

    Description “无体育,不清华”.“每天锻炼一小时,健康工作五十年,幸福生活一辈子” 在清华,体育运动绝对是同学们生活中不可或缺的一部分.为了响应学校的号召,模范好学生王队长决定坚持晨跑.不 ...

  9. [HNOI 2004]L语言

    Description 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写字母构成.一个单词W也是由若干小写字母构成.一个字典D ...

  10. [HNOI2009]无归岛

    Description Neverland是个神奇的地方,它由一些岛屿环形排列组成,每个岛上都生活着之中与众不同的物种.但是这些物种都有一个共同的生活习性:对于同一个岛上的任意两个生物,他们有且仅有一 ...