网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 HTML实现遮罩层的方法 HTML中如何使用遮罩层
内容
    这篇文章主要为大家详细介绍了HTML实现遮罩层的方法，Web页面中使用遮罩层，可防止重复操作，那么如何在HTML中使用遮罩层？感兴趣的小伙伴们可以参考一下
    Web页面中使用遮罩层，可防止重复操作，提示loading；也可以模拟弹出模态窗口。
    实现思路：一个DIV作为遮罩层，一个DIV显示loading动态GIF图片。在下面的示例代码中，同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。
    示例代码：
    index.html
    XML/HTML Code
    代码如下:
    <!DOCTYPE html>  
    <html lang="zh-CN">  
    <head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Commpatible" content="IE=edge">  
    <title>HTML遮罩层</title>  
    <link rel="stylesheet" href="css/index.css">  
    </head>  
    <body>  
        <div id="header">  
            <div>  
                <span>  
                    HTML遮罩层使用   
                </span>  
            </div>  
        </div>  
        <div id="body">  
            <iframe id="iframeRight" name="iframeRight" height="100%"  
                scrolling="no" frameborder="0"  
                 
                onload="rightIFrameLoad(this)" src="body.html"></iframe>  
        </div>  
        <!-- 遮罩层DIV -->  
        <div id="overlay"></div>  
        <!-- Loading提示 DIV -->  
        <div id="loadingTip">  
            <img src="images/loading.gif" />  
        </div>  
        <!-- 模拟模态窗口DIV -->  
        <div id="modalDiv"></div>  
        <script type='text/javascript' src="js/jquery-1.10.2.js"></script>  
        <script type="text/javascript" src="js/index.js"></script>  
    </body>  
    </html>  
    index.css
    CSS Code
    代码如下:
    * {   
        margin: 0;   
        padding: 0;   
    }   
    html, body {   
        width: 100%;   
        height: 100%;   
        font-size: 14px;   
    }   
    div.header {   
        width: 100%;   
        height: 100px;   
        border-bottom: 1px dashed blue;   
    }   
    div.title-outer {   
        position: relative;   
        top: 50%;   
        height: 30px;   
    }   
    span.title {   
        text-align: left;   
        position: relative;   
        left: 3%;   
        top: -50%;   
        font-size: 22px;   
    }   
    div.body {   
        width: 100%;   
    }   
    .overlay {   
        position: absolute;   
        top: 0px;   
        left: 0px;   
        z-index: 10001;   
        display:none;   
        filter:alpha(opacity=60);   
        background-color: #777;   
        opacity: 0.5;   
        -moz-opacity: 0.5;   
    }   
    .loading-tip {   
        z-index: 10002;   
        position: fixed;   
        display:none;   
    }   
    .loading-tip img {   
        width:100px;   
        height:100px;   
    }   
    .modal {   
        position:absolute;   
        width: 600px;   
        height: 360px;   
        border: 1px solid rgba(0, 0, 0, 0.2);   
        box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.5);   
        display: none;   
        z-index: 10003;   
        border-radius: 6px;   
    }   
    index.js
    JavaScript Code
    代码如下:
    function rightIFrameLoad(iframe) {   
        var pHeight = getWindowInnerHeight() - $('#header').height() - 5;   
        $('div.body').height(pHeight);   
        console.log(pHeight);   
    }   
    // 浏览器兼容 取得浏览器可视区高度   
    function getWindowInnerHeight() {   
        var winHeight = window.innerHeight   
                || (document.documentElement && document.documentElement.clientHeight)   
                || (document.body && document.body.clientHeight);   
        return winHeight;   
    }   
    // 浏览器兼容 取得浏览器可视区宽度   
    function getWindowInnerWidth() {   
        var winWidth = window.innerWidth   
                || (document.documentElement && document.documentElement.clientWidth)   
                || (document.body && document.body.clientWidth);   
        return winWidth;   
    }   
    /**  
     * 显示遮罩层  
     */  
    function showOverlay() {   
        // 遮罩层宽高分别为页面内容的宽高   
        $('.overlay').css({'height':$(document).height(),'width':$(document).width()});   
        $('.overlay').show();   
    }   
    /**  
     * 显示Loading提示  
     */  
    function showLoading() {   
        // 先显示遮罩层   
        showOverlay();   
        // Loading提示窗口居中   
        $("#loadingTip").css('top',   
                (getWindowInnerHeight() - $("#loadingTip").height()) / 2 + 'px');   
        $("#loadingTip").css('left',   
                (getWindowInnerWidth() - $("#loadingTip").width()) / 2 + 'px');   
                   
        $("#loadingTip").show();   
        $(document).scroll(function() {   
            return false;   
        });   
    }   
    /**  
     * 隐藏Loading提示  
     */  
    function hideLoading() {   
        $('.overlay').hide();   
        $("#loadingTip").hide();   
        $(document).scroll(function() {   
            return true;   
        });   
    }   
    /**  
     * 模拟弹出模态窗口DIV  
     * @param innerHtml 模态窗口HTML内容  
     */  
    function showModal(innerHtml) {   
        // 取得显示模拟模态窗口用DIV   
        var dialog = $('#modalDiv');   
        // 设置内容   
        dialog.html(innerHtml);   
        // 模态窗口DIV窗口居中   
        dialog.css({   
            'top' : (getWindowInnerHeight() - dialog.height()) / 2 + 'px',   
            'left' : (getWindowInnerWidth() - dialog.width()) / 2 + 'px'  
        });   
        // 窗口DIV圆角   
        dialog.find('.modal-container').css('border-radius','6px');   
        // 模态窗口关闭按钮事件   
        dialog.find('.btn-close').click(function(){   
            closeModal();   
        });   
        // 显示遮罩层   
        showOverlay();   
        // 显示遮罩层   
        dialog.show();   
    }   
    /**  
     * 模拟关闭模态窗口DIV  
     */  
    function closeModal() {   
        $('.overlay').hide();   
        $('#modalDiv').hide();   
        $('#modalDiv').html('');   
    }   
    body.html
    XML/HTML Code
    代码如下:
    <!DOCTYPE html>  
    <html lang="zh-CN">  
    <head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Commpatible" content="IE=edge">  
    <title>body 页面</title>  
    <style type="text/css">  
    * {   
        margin: 0;   
        padding: 0;   
    }   
    html, body {   
        width: 100%;   
        height: 100%;   
    }   
    .outer {   
        width: 200px;   
        height: 120px;   
        position: relative;   
        top: 50%;   
        left: 50%;   
    }   
    .inner {   
        width: 200px;   
        height: 120px;   
        position: relative;   
        top: -50%;   
        left: -50%;   
    }   
    .button {   
        width: 200px;   
        height: 40px;   
        position: relative;   
    }   
        
    .button#btnShowLoading {   
        top: 0;   
    }   
    .button#btnShowModal {   
        top: 30%;   
    }   
    </style>  
    <script type="text/javascript">  
        function showOverlay() {   
            // 调用父窗口显示遮罩层和Loading提示   
            window.top.window.showLoading();   
            // 使用定时器模拟关闭Loading提示   
            setTimeout(function() {   
                window.top.window.hideLoading();   
            }, 3000);   
        }   
        function showModal() {   
            // 调用父窗口方法模拟弹出模态窗口   
            window.top.showModal($('#modalContent').html());   
        }   
    </script>  
    </head>  
    <body>  
        <div class='outer'>  
            <div class='inner'>  
                <button id='btnShowLoading' class='button' onclick='showOverlay();'>点击弹出遮罩层</button>  
                <button id='btnShowModal' class='button' onclick='showModal();'>点击弹出模态窗口</button>  
            </div>  
        </div>  
        <!-- 模态窗口内容DIV，将本页面DIV内容设置到父窗口DIV上并模态显示 -->  
        <div id='modalContent' style='display: none;'>  
            <div class='modal-container' style='width: 100%;height: 100%;background-color: white;'>  
                <div style='width: 100%;height: 49px;position: relative;left: 50%;top: 50%;'>  
                    <span style='font-size: 36px; width: 100%; text-align:center; display: inline-block; position:inherit; left: -50%;top: -50%;'>模态窗口1</span>  
                </div>  
                <button class='btn-close' style='width: 100px; height: 30px; position: absolute; right: 30px; bottom: 20px;'>关闭</button>  
            </div>  
        </div>  
        <script type='text/javascript' src="js/jquery-1.10.2.js"></script>  
    </body>  
    </html>  
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/16 1:02:48