直接上代码：
<!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之匿名函数

    匿名函数 匿名函数:为了解决那些功能很简单的需求而设计的一句话函数. #这段代码 def calc(n): return n**n print(calc(10)) #换成匿名函数 calc = lam ...

  2. Python/零起点（一、数字及元组）

    Python/零起点(一.数字及元组) int整型 int()强行转换成整型数据类型 int整型是不可变,且是不可迭代的对象 一.整型数字用二进制位数表示案例: age=7 #设定一个数字赋值给age ...

  3. Github学习笔记-不定时更新

    最近在搞一个外包项目,有个非常厉害的师兄带我,他写后端,我负责前端部分,项目合作需要用到github,这也是早晚要接触,记录下项目过程中对github/git使用的学习笔记. 1.在网上看了一些教程之 ...

  4. asp.net core 六 Oracle ORM

         .netcore 中 Oracle ORM      在真正将项目移植到.netcore下,才发现会有很多问题,例如访问Oracle,问题出现的时间在2017年底          参考连接 ...

  5. logging格式

    import logging def foo(s): return 10 / int(s) def bar(s): return foo(s) * 2 def main(): try: bar(0) ...

  6. JS面向对象使用面向对象进行开发

      面向对象基础一之初体验使用面向对象进行开发 对 JS 中的面向对象的基础进行讲述, 初体验使用面向对象进行开发 主要内容是 面向对象的概念及特性 用面向对象的方式解决简单的标签创建实例 一些基础的 ...

  7. python制作一个简单的中奖系统

    注释: 展示图下的代码,我是用pycharm写的,是python解释器中的一种,本课没不同解释器的要求,可根据自己喜欢的解释器编写. 步骤: 本期给大家带来的是,一个简单的中奖系统,首先打开自己电脑上 ...

  8. 【贪心】Codeforces 349B.Color the Fence题解

    题目链接:http://codeforces.com/problemset/problem/349/B 题目大意 小明要从9个数字(1,2,--,9)去除一些数字拼接成一个数字,是的这个数字最大. 但 ...

  9. Windows下安装Python3和Django

    下载python3 首先去 python的官网 下载最新稳定版的python3, 我下载的时候python3的最新版本是3.6.5. 亦可点击 此链接 直接下载. 安装python3 傻瓜式安装,注意 ...

  10. 【PYTHON】用户登录三次错误锁定

    黑名单:blacklist.txt 用户名单:username_password.py # Author:Stephen Yuan # 用户名和密码 username_password = { ', ...