转自：https://blog.csdn.net/baidu_30809315/article/details/83900255

gif动态图下载地址：http://blog.sina.com.cn/s/blog_4ad042e50102ek2v.html

方式一：

1、在html的body中添加如下代码：

<div class="modal fade" id="loadingModal">

    <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">

        <div class="progress progress-striped active" style="margin-bottom: 0;">

            <div class="progress-bar" style="width: 100%;"></div>

        </div>

        <h5>正在加载...</h5>

    </div>

</div>

2、用jquery进行显示和隐藏

//显示

$("#loadingModal").modal('show');

//隐藏

$("#loadingModal").modal('hide');

3、其他设置

//使点击空白处遮罩层不会消失

$("#loadingModal").modal({backdrop:'static'});

//按Tab键遮罩层不会消失 ，默认值为true

$("#loadingModal").modal({keyboard:false});

//也可以一起运用

//backdrop 为 static 时，点击模态对话框的外部区域不会将其关闭。

//keyboard 为 false 时，按下 Esc 键不会关闭 Modal。

$('#loadingModal').modal({backdrop: 'static', keyboard: false});

方式二（添加图片loader.gif）：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>遮罩层DEM</title>

    <!-- Bootstrap -->

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">

        .loading {

            background: #00000040 url(loader.gif) no-repeat center 50%;

            z-index: 9999;

        }

    </style>

</head>

<body>

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

        <h2>遮罩层DEMO</h2>

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

        <button onclick="startup()">遮罩层</button>

        <!-- 遮罩层模态框（Modal） -->

        <div class="modal fade loading"

             id="myModal"

             tabindex="-1"

             role="dialog"

             aria-labelledby="myModalLabel"

             aria-hidden="true"

             data-backdrop="static"

             data-keyboard="false">

            // data-backdrop="static" data-keyboard="false" // 以上属性是静止掉了模态框的关闭按钮和点击空白处关闭模态框

        </div>

    </div>

    <script>

        function startup() {

            $("#myModal").modal('show');

            setTimeout('shutdown()', 5000);

        }

        function shutdown() {

            $("#myModal").modal('hide');

        }

    </script>

</body>

</html>

　　

bootstrap添加遮罩层loadingmask的更多相关文章

  1. js添加遮罩层

    直接用代码来说明 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskT ...

  2. WPF loading遮罩层 LoadingMask

    原文:WPF loading遮罩层 LoadingMask 大家可能很纠结在异步query数据的时候想在wpf程序中显示一个loading的遮罩吧 今天就为大家介绍下遮罩的制作 源码下载 点击此处 先 ...

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

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

  4. 前端小结（3）---- 添加遮罩层，并弹出div

    有如下div: <div id='pop-div' class="pop-box"> <div class="input-group has-info& ...

  5. 基于Bootstrap的遮罩层，带有加载提示

    1.body中的html <div class="modal fade" id="loadingModal"> <div style=&quo ...

  6. 前端页面给指定的div添加遮罩层，并且带有加载中的小旋转图片

    话不多说,先上代码,其实还是比较简单的 $("<div id='shade' style='opacity:0.85;background:white'></div> ...

  7. bootstrap只有遮罩层没有对话框的解决方法

    前端很差很差,猜测应该是各种js冲突的问题,换了一个jquery或bootstrap版本的不兼容. https://blog.csdn.net/Pabebe/article/details/70230 ...

  8. 有时在UIWindow上添加遮罩层不成功的原因

    程序启动后,初始化window,初始化controller,加载试图,这三个方法的顺序是嵌套的 类似于: - (id) initWindow {[self initController];} 而我在i ...

  9. bootstrap添加多个模态对话框支持

    bootstrap添加多个模态对话框支持 (2015-03-04 21:05:35) 转载▼ 标签: 房产   因为项目需要,在页面交互上要弹出多个dialog窗口,而bootstrap的modal支 ...

随机推荐

  1. 基于MNIST数据集使用TensorFlow训练一个包含一个隐含层的全连接神经网络

    包含一个隐含层的全连接神经网络结构如下: 包含一个隐含层的神经网络结构图 以MNIST数据集为例,以上结构的神经网络训练如下: #coding=utf-8 from tensorflow.exampl ...

  2. C++Primer第五版——习题答案详解（三）

    习题答案目录:https://www.cnblogs.com/Mered1th/p/10485695.html 第4章 表达式 练习4.10 while(cin>>i&&i ...

  3. IDEA—— 找不到或无法加载主类Main

    最近使用idea,编写了一个项目,发现老是找不到main,网上找了一大圈的解决方案,都不行.灵机一动升级了jdk就可以了,之前用的是1.7的,换成了1.8的就好了.

  4. Python【每日一问】01

    问:深拷贝.浅拷贝.直接赋值的区别是什么?并举例说明 1.区别 (1)直接赋值:对象的引用 (2)浅拷贝(copy):拷贝父对象,不会拷贝对象的内部的子对象 (3)深拷贝(deepcopy): cop ...

  5. VRay材质练习（一）：水、玻璃、牛奶

    软件环境 a) 3ds max 2014b) V-Ray 3.60.03 渲染效果图集 玻璃杯 玻璃杯+水 玻璃杯+牛奶 材质详细参数 一.玻璃材质 Diffuse (0,0,0), Roughnes ...

  6. 如何查看安装python和numpy的版本

    命令行下查看python和numpy的版本和安装位置 1.查看python版本 方法一: python -V 注意:‘-V‘中‘V’为大写字母,只有一个‘-’ 方法二: python --versio ...

  7. wireshark抓本地回环包

    问题描述: 在网络程序开发的过程中,我们往往会把本机既作为客户端又作为服务器端来调试代码,使得本机自己和自己通信.但是wireshark此时是无法抓取到数据包的,需要通过简单的设置才可以 方法一:Wi ...

  8. RMI（远程方法调用）入门

    这两篇可以入门 http://www.cnblogs.com/ninahan0419/archive/2009/06/25/javarmi.html http://www.cnblogs.com/wx ...

  9. 部署一个基于python语言的web发布环境

    ---恢复内容开始--- 1) 一门面向对象的语言 2)拥有丰富的库 3)可移植性 4)免费.开源 5)简单易易学 可做软件开发.人工智能.web开发等等 部署流程: Cnetos7.5+Nginx+ ...

  10. YAML基本语法

    正如YAML所表示的YAML Ain’t Markup Language,YAML /ˈjæməl/ 是一种简洁的非标记语言.YAML以数据为中心,使用空白,缩进,分行组织数据,从而使得表示更加简洁易 ...