转自：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. linux添加zabbix service并开机自动启动

    最近有个数据库相关操作后需要重启操作系统,重启后发现zabbix监控一直没有数据,迷了半天原来zabbix压根就没有启动.想了半天决定把zabbix添加到系统服务,并设置开机启动. 1.按一定的规则编 ...

  2. xsyProblem A: 密集子图(graph)

    f[i][S]三进制压缩表示最长路为i,0代表不在该集合,1代表不是最短路为i集合,2代表是最短路集合, 转移枚举i+1集合是那些, 乘以概率即可 预处理保证复杂度 #include<cstdi ...

  3. 转载：指针delete后要设置为NULL

    本文来自:http://rpy000.blog.163.com/blog/static/196109536201292615547939/ 众所周知,最开始我们用new来创建一个指针,那么等我们用完它 ...

  4. leetcode53

    public class Solution { public int MaxSubArray(int[] nums) { int max = int.MinValue; ; ; i < nums ...

  5. vue安装搭建

    title: vue安装搭建 date: 2018-04-21 14:00:03 tags: [vue] --- 安装 首先安装nodejs 直接官网下载最新版本http://nodejs.cn/do ...

  6. win2012R2打Windows8.1-KB2919355 问题

    解决方法 https://blog.csdn.net/qwq1503/article/details/65916426

  7. ReactiveX 学习笔记（20）使用 RxJava + RxBinding 进行 GUI 编程

    课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...

  8. SQL Server error

    原因:文件没有权限 出错: TITLE: Microsoft SQL Server Management Studio------------------------------ Attach dat ...

  9. Apache 修改端口号

    默认是80端口,可在httpd.conf文件中修改以下2个地方的端口号为预定的即可,例如修改为8080端口 把httpd.conf 中Listen 80 改成Listen 8080 把ServerNa ...

  10. vi 操作

    vi 3种模式:1命令行模式,2插入模式,3末行模式 Vim启动后直接进入的是命令行模式,命令行模式顾名思义就是可以输入各种命令的意思, 1. 命令行下按i键进入“插入模式”,命令行下按:键进入“末行 ...