转自：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. Chapter4 复杂度分析(下):浅析最好,最坏,平均,均摊时间复杂度

    四个复杂度分析: 1:最好情况时间复杂度(best case time complexity) 2:最坏情况时间复杂度(worst case time complexity) 3:平均情况时间复杂度( ...

  2. redis基本知识

    启动redis: redis-sever 检查redis是否在运行: redis-cli 再ping 会提示PONG 启动远程redis:redis-cli -h 127.0.0.1 -p 6379 ...

  3. python3 列表去除重复项保留原序

    l1 = ['a',1,'c','b',2,'b','c','d','a'] l2= sorted(set(l1),key=l1.index) print('l2:',l2) print('l1:', ...

  4. kubernetes之configmap,深度解析mountPath,subPath,key,path的关系和作用

    参考:https://www.cnblogs.com/breezey/p/6582082.html 我们知道,在几乎所有的应用开发中,都会涉及到配置文件的变更,比如说在web的程序中,需要连接数据库, ...

  5. python爬虫之解析库Beautiful Soup

    为何要用Beautiful Soup Beautiful Soup是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式, 是一个 ...

  6. English-商务英文邮件例句100句

    最常用最专业的商务英文邮件例句100句——塞依SAP培训 字体大小:大 | 中 | 小2013-08-27 17:24 阅读(74) 评论(0) 分类:sap职场  1. I am writing t ...

  7. firewalld 操作

    https://blog.csdn.net/s_p_j/article/details/80979450 firewall-cmd --permanent --add-rich-rule=" ...

  8. TXLSReadWriteII5 单元格读写

    unit Main; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, ...

  9. 云笔记项目-Spring事务学习_测试准备

    在做云笔记项目的过程中,顺便简单的学习了Spring的事务概念,业务以如果添加笔记,则增加用户星星数目作为例子,引入了事务的概念.类似注册送积分之类的,云笔记项目以增加笔记就送星星来说明事务.具体在添 ...

  10. Blender Python脚本的6个技巧

    https://www.youtube.com/watch?v=vFoh3S8MLBI&index=3&list=PLw8Sjaw0TPm0J9DXj3XGi1_9fxXezlzrM ...