直接上代码：
<!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. Python 编写登录接口

    流程图: 源码:

  2. ActiveMQ学习系列（三）----下载github源码并编译

    前记:坚持使用官网的资源去学习是挺痛苦的一个过程,昨天瞎溜达了一天,也没看到有系统性的学习文章,倒是发现了github上的ActiveMq项目. 地址:https://github.com/apach ...

  3. python CSRF跨站请求伪造

    python CSRF跨站请求伪造 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  4. MongoDB的安装和使用指南

    什么是MongoDB   MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系 ...

  5. 基于 MySQL 的数据库实践（基本查询）

    首先根据准备工作中的操作导入大学模式,打开数据库连接后进入到 MySQL 的交互界面,再使用命令 use db-book; 切换到 db-book 数据库. 单关系查询 SQL 查询的基本结构由三个子 ...

  6. WPF 字符串溢出判断,字符串长度是否超过控件宽度

    TextBloc可以将TextTrimming属性设置为CharacterEllipsis 其他控件可以在控件大小变更或者其他事件上附加下列方法 private void OnEllipsis(obj ...

  7. tkinter 创建登陆注册界面

    import tkinter as tk from tkinter import messagebox #设置窗口居中 def window_info(): ws = window.winfo_scr ...

  8. [UVa 1326]Jurassic Remains

    题解 在一个字符串中,每个字符出现的次数本身是无关紧要的,重要的只是这些次数的奇偶性,因此想到用一个二进制的位表示一个字母($1$表示出现奇数次,$0$表示出现偶数次).比如样例的$6$个数,写成二进 ...

  9. [Jsoi2011]分特产

    Description JYY 带队参加了若干场ACM/ICPC 比赛,带回了许多土特产,要分给实验室的同学们. JYY 想知道,把这些特产分给N 个同学,一共有多少种不同的分法?当然,JYY 不希望 ...

  10. 51nod1295 XOR key(可持久化trie)

    1295 XOR key题目来源: HackerRank基准时间限制:1.5 秒 空间限制:262144 KB 分值: 160 难度:6级算法题 给出一个长度为N的正整数数组A,再给出Q个查询,每个查 ...