찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >HTML에서 마스크 레이어를 구현하는 방법 HTML에서 마스크 레이어를 사용하는 방법

HTML에서 마스크 레이어를 구현하는 방법 HTML에서 마스크 레이어를 사용하는 방법

不言
不言원래의
2018-06-05 16:29:175615검색

이 글에서는 주로 HTML에서 마스크 레이어를 구현하는 방법을 자세히 소개합니다. 웹 페이지에서 마스크 레이어를 사용하면 HTML에서 마스크 레이어를 어떻게 사용할 수 있을까요? 관심 있는 친구들은

웹 페이지에서 마스크 레이어를 사용하면 반복 작업을 방지하고 팝업 모달 창을 시뮬레이션할 수도 있습니다.

구현 아이디어: 하나의 p는 마스크 레이어 역할을 하고, 하나의 p는 로딩되는 동적 GIF 이미지를 표시합니다. 다음 샘플 코드에서는 iframe 하위 페이지에서 표시 및 숨기기 마스크 레이어를 호출하는 방법도 보여줍니다.

샘플 코드:

index.html

XML/HTML 코드클립보드에 콘텐츠 복사

<!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>  
    <p class="header" id="header">  
        <p class="title-outer">  
            <span class="title">  
                HTML遮罩层使用   
            </span>  
        </p>  
    </p>  
    <p class="body" id="body">  
        <iframe id="iframeRight" name="iframeRight" width="100%" height="100%"  
            scrolling="no" frameborder="0"  
            style="border: 0px;margin: 0px; padding: 0px; width: 100%; height: 100%;overflow: hidden;"  
            onload="rightIFrameLoad(this)" src="body.html"></iframe>  
    </p>  
       
    <!-- 遮罩层p -->  
    <p id="overlay" class="overlay"></p>  
    <!-- Loading提示 p -->  
    <p id="loadingTip" class="loading-tip">  
        <img src="images/loading.gif" />  
    </p>  
       
    <!-- 模拟模态窗口p -->  
    <p class="modal" id="modalp"></p>  
       
    <script type=&#39;text/javascript&#39; src="js/jquery-1.10.2.js"></script>  
    <script type="text/javascript" src="js/index.js"></script>  
</body>  
</html>

index.css

CSS 코드클립보드에 콘텐츠 복사

* {   
    margin: 0;   
    padding: 0;   
}   
  
html, body {   
    width: 100%;   
    height: 100%;   
    font-size: 14px;   
}   
  
p.header {   
    width: 100%;   
    height: 100px;   
    border-bottom: 1px dashed blue;   
}   
  
p.title-outer {   
    position: relative;   
    top: 50%;   
    height: 30px;   
}   
span.title {   
    text-align: left;   
    position: relative;   
    left: 3%;   
    top: -50%;   
    font-size: 22px;   
}   
  
p.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 코드클립보드에 콘텐츠 복사

function rightIFrameLoad(iframe) {   
    var pHeight = getWindowInnerHeight() - $(&#39;#header&#39;).height() - 5;   
       
    $(&#39;p.body&#39;).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() {   
    // 遮罩层宽高分别为页面内容的宽高   
    $(&#39;.overlay&#39;).css({&#39;height&#39;:$(document).height(),&#39;width&#39;:$(document).width()});   
    $(&#39;.overlay&#39;).show();   
}   
  
/** 
 * 显示Loading提示  
 */  
function showLoading() {   
    // 先显示遮罩层   
    showOverlay();   
    // Loading提示窗口居中   
    $("#loadingTip").css(&#39;top&#39;,   
            (getWindowInnerHeight() - $("#loadingTip").height()) / 2 + &#39;px&#39;);   
    $("#loadingTip").css(&#39;left&#39;,   
            (getWindowInnerWidth() - $("#loadingTip").width()) / 2 + &#39;px&#39;);   
               
    $("#loadingTip").show();   
    $(document).scroll(function() {   
        return false;   
    });   
}   
  
/** 
 * 隐藏Loading提示  
 */  
function hideLoading() {   
    $(&#39;.overlay&#39;).hide();   
    $("#loadingTip").hide();   
    $(document).scroll(function() {   
        return true;   
    });   
}   
  
/** 
 * 模拟弹出模态窗口p  
 * @param innerHtml 模态窗口HTML内容  
 */  
function showModal(innerHtml) {   
    // 取得显示模拟模态窗口用p   
    var dialog = $(&#39;#modalp&#39;);   
       
    // 设置内容   
    dialog.html(innerHtml);   
       
    // 模态窗口p窗口居中   
    dialog.css({   
        &#39;top&#39; : (getWindowInnerHeight() - dialog.height()) / 2 + &#39;px&#39;,   
        &#39;left&#39; : (getWindowInnerWidth() - dialog.width()) / 2 + &#39;px&#39;  
    });   
       
    // 窗口p圆角   
    dialog.find(&#39;.modal-container&#39;).css(&#39;border-radius&#39;,&#39;6px&#39;);   
       
    // 模态窗口关闭按钮事件   
    dialog.find(&#39;.btn-close&#39;).click(function(){   
        closeModal();   
    });   
       
    // 显示遮罩层   
    showOverlay();   
       
    // 显示遮罩层   
    dialog.show();   
}   
  
/** 
 * 模拟关闭模态窗口p  
 */  
function closeModal() {   
    $(&#39;.overlay&#39;).hide();   
    $(&#39;#modalp&#39;).hide();   
    $(&#39;#modalp&#39;).html(&#39;&#39;);   
}

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($(&#39;#modalContent&#39;).html());   
    }   
       
</script>  
</head>  
<body>  
    <p class=&#39;outer&#39;>  
        <p class=&#39;inner&#39;>  
            <button id=&#39;btnShowLoading&#39; class=&#39;button&#39; onclick=&#39;showOverlay();&#39;>点击弹出遮罩层</button>  
            <button id=&#39;btnShowModal&#39; class=&#39;button&#39; onclick=&#39;showModal();&#39;>点击弹出模态窗口</button>  
        </p>  
    </p>  
       
    <!-- 模态窗口内容p，将本页面p内容设置到父窗口p上并模态显示 -->  
    <p id=&#39;modalContent&#39; style=&#39;display: none;&#39;>  
        <p class=&#39;modal-container&#39; style=&#39;width: 100%;height: 100%;background-color: white;&#39;>  
            <p style=&#39;width: 100%;height: 49px;position: relative;left: 50%;top: 50%;&#39;>  
                <span style=&#39;font-size: 36px; width: 100%; text-align:center; display: inline-block; position:inherit; left: -50%;top: -50%;&#39;>模态窗口1</span>  
            </p>  
            <button class=&#39;btn-close&#39; style=&#39;width: 100px; height: 30px; position: absolute; right: 30px; bottom: 20px;&#39;>关闭</button>  
        </p>  
    </p>  
    <script type=&#39;text/javascript&#39; src="js/jquery-1.10.2.js"></script>  
</body>  
</html>

실행 결과:

초기화

디스플레이 마스크 레이어 및 로딩 프롬프트

마스크 레이어 표시 및 팝업 모달 창 시뮬레이션

위는 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

관련 권장사항:

배경 이미지를 HTML의 브라우저 크기에 맞게 조정하세요

위 내용은 HTML에서 마스크 레이어를 구현하는 방법 HTML에서 마스크 레이어를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML 페이지, C 함수에 대한 JS 호출 테스트다음 기사：HTML 페이지, C 함수에 대한 JS 호출 테스트

관련 기사

더보기