bootstrap loadmask

最新推荐文章于 2022-08-29 01:07:41 发布

Jalen备忘录

最新推荐文章于 2022-08-29 01:07:41 发布

阅读量1.7k

点赞数

分类专栏： Html JavaScript

JavaScript 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

Html

14 篇文章 0 订阅

订阅专栏

方式一：

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>

Jalen备忘录

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap loadmask

方式一：1、在html的body中添加如下代码：&lt;div class="modal fade" id="loadingModal"&gt; &lt;div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;marg...
复制链接

扫一扫