转自：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. 廖雪峰Java6 IO编程-3Reader和Writer-1Reader

    1.java.io.Reader和java.io.InputStream的区别 InputStream Reader 字节流,以byte为单位 字符流,以char为单位 读取字节(-1,0-255): ...

  2. minicom 抓取log

    使用minicom也有很长时间了,只用minicom抓过uart log,但是从来没有去保存过这个log,也不知道有这个功能.后来在超级终端中发现有这个功能(传送->捕获文字),想想minico ...

  3. android 开发 View _14 MotionEvent和事件处理详解，与实践自定义滑动条View

    转载https://blog.csdn.net/huaxun66/article/details/52352469 MotionEvent MotionEvent对象是与用户触摸相关的时间序列,该序列 ...

  4. C++获取当前执行程序文件所在的全路径

  5. Vim 命令、操作、快捷键

    打开单个文件:vim file 同时打开多个文件:vim file1 file2 file3 ... 在vim窗口中打开一个新文件 :  :open file 在新窗口中打开文件: :split fi ...

  6. 优化 SQL SELECT 语句性能

    SELECT语句的性能调优有时是一个非常耗时的任务,在我看来它遵循帕累托原则.20%的努力很可能会给你带来80%的性能提升,而为了获得另外20%的性能提升你可能需要花费80%的时间. 检查索引:在SQ ...

  7. oracle 创建表，删除表，修改表，查询表

    1,获取当前用户下的所有表信息 =>  SELECT * FROM user_tables 1.1,查询某一张表的字段信息:SELECT  *  FROM user_tab_columns  w ...

  8. JavaScript: Constructor and Object Oriented Programming

    Constructor :  Grammar: object.constructor Example: Javascript code: 1 function obj1() { this.number ...

  9. SpringBoot +Jpa+ Hibernate+Mysql工程

    1 使用工具workspace-sts 3.9.5.RELEASE (1)新建一个SpringBoot 项目,选择加载项目需要的的组件.DevTools,JPA,Web,Mysql. Finish.  ...

  10. ELK Redis高性能加速

    1.下载redis并安装好 wget http://download.redis.io/releases/redis-2.8.13.tar.gz tar zxf redis-.tar.gz cd re ...