Heim > Artikel > Web-Frontend > So implementieren Sie eine Maskenebene in HTML. So verwenden Sie eine Maskenebene in HTML

So implementieren Sie eine Maskenebene in HTML. So verwenden Sie eine Maskenebene in HTML

不言Original: 2018-06-05 16:29:175552Durchsuche

In diesem Artikel wird hauptsächlich die Methode zur Implementierung der Maskenebene in HTML vorgestellt. Die Verwendung der Maskenebene in Webseiten kann also wiederholte Vorgänge verhindern. Interessierte Freunde können sich auf

beziehen. Durch die Verwendung einer Maskenebene auf einer Webseite können wiederholte Vorgänge verhindert und das Laden beschleunigt werden. Außerdem kann ein modales Popup-Fenster simuliert werden.

Implementierungsidee: Ein p dient als Maskenebene und ein p zeigt das ladende dynamische GIF-Bild an. Im folgenden Beispielcode wird außerdem gezeigt, wie die Anzeige- und Ausblendmaskenebene auf der Iframe-Unterseite aufgerufen wird.

Beispielcode:

index.html

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<!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-CodeInhalt in die Zwischenablage kopieren

* {   
    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-CodeInhalt in die Zwischenablage kopieren

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-CodeInhalt kopieren in Zwischenablage

<!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>

Ergebnis ausführen:

Initialisierung

Maskenebene und Ladetipps anzeigen

Maskenebene anzeigen und modales Popup-Fenster simulieren

Das Obige ist hoffentlich der gesamte Inhalt dieses Artikels Es wird für das Lernen aller hilfreich sein.

Verwandte Empfehlungen:

Passen Sie das Hintergrundbild an die Browsergröße in HTML an

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Maskenebene in HTML. So verwenden Sie eine Maskenebene in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML-Seite, JS-Aufruf der C-Funktion testenNächster Artikel：HTML-Seite, JS-Aufruf der C-Funktion testen

In Verbindung stehende Artikel

Mehr sehen