转自：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. can't access lexical declaration `a' before initialization

    <script type="text/javascript"> alert(a); let a=2; </script> 以上代码报错:   Referen ...

  2. Java执行JavaScript代码

    Java执行JavaScript代码 这篇文章主要为大家详细介绍了Java执行JavaScript代码的具体操作方法,感兴趣的小伙伴们可以参考一下 我们要在Java中执行JavaScriptMetho ...

  3. MySQL 之 MHA + ProxySQL + keepalived 实现读写分离，高可用（一）

    准备服务器: docker network create --subnet=192.168.0.0/16 staticnetdocker run -d --privileged -v `pwd`/my ...

  4. rabbitmq (四) 路由

    上文讲的是广播类型fanout 本章讲 direct和topic. 当使用广播类型fanout的时候: routingKey字段不起作用. direct:精确匹配 routingKey:匹配一个单词, ...

  5. String类中的equals()方法：

    String类中的equals()方法: public boolean equals(Object anObject) { //如果是同一个对象 if (this == anObject) { ret ...

  6. linux 获取帮助的命令

    Linux命令详解:[7]获得命令帮助 听语音 | 浏览:4601 | 更新:2015-01-30 20:21 | 标签:linux 1 2 3 4 5 分步阅读 在维护和使用Linux系统时,常常会 ...

  7. Github使用笔记——创建远程库

    系统:CentOS7 一.yum install git 二.配置 git config --global user.name "XXX" git config -global u ...

  8. __get__ __set__ __delete__描述符

    描述符就是一个新式类,这个类至少要实现__get__ __set__ __delete__方法中的一种class Foo: def __get__(self, instance, owner): pr ...

  9. ---dd io测试

    下面是一个简单测试,虽然不够准确但是简单立即可行, 当前目录的IO写读测试: (写) dd if=/dev/zero of=test bs=64k count=16k conv=fdatasync ( ...

  10. jq动画分析1

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...