zoukankan      html  css  js  c++  java
  • bootstrap添加遮罩层loadingmask

    转自: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=" 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=" 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>
    

      

  • 相关阅读:
    7.Perfect Number
    6.Hamming Distance
    5.Palindrome Number
    4.String to Integer (atoi)
    3.Reverse Integer
    [HP SIM] Systems Insight Manager stopped working, sqlserver error code 0x80090302。
    [HP SIM] Systems Insight Manager 不能正常工作,数据库错误0x80090302。
    [Outlook] 用powershell做outlook中的delegate.
    [Outlook] Use powershell to do delegates like outlook.
    [Outlook] profile在注册表里的秘密。
  • 原文地址:https://www.cnblogs.com/keyi/p/10418784.html
Copyright © 2011-2022 走看看