recherche

Maison  >  Article  >  interface Web  >  Comment implémenter un calque de masque en HTML Comment utiliser un calque de masque en HTML

Comment implémenter un calque de masque en HTML Comment utiliser un calque de masque en HTML

不言
不言original
2018-06-05 16:29:175569parcourir

Cet article présente principalement en détail la méthode d'implémentation du calque de masque en HTML. L'utilisation du calque de masque dans les pages Web peut empêcher des opérations répétées. Alors, comment utiliser le calque de masque en HTML ? Les amis intéressés peuvent se référer à

L'utilisation d'un calque de masque dans une page Web peut empêcher des opérations répétées et un chargement rapide ; elle peut également simuler une fenêtre modale contextuelle.

Idée d'implémentation : Un p sert de calque de masque et un p affiche l'image GIF dynamique de chargement. Dans l’exemple de code suivant, il montre également comment appeler le calque de masque d’affichage et de masquage dans la sous-page iframe.

Exemple de code :

index.html

Code XML/HTMLCopier le contenu dans le presse-papiers

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

Code CSSCopier le contenu dans le presse-papiers

* {   
    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

Code JavaScriptCopier le contenu dans le presse-papiers

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

Code XML/HTML Copier le contenu dans le presse-papiers

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

Résultat d'exécution :

Initialisation

Afficher le calque de masque et l'invite de chargement

Afficher le calque de masque et la fenêtre modale contextuelle de simulation

Ce qui précède est le tout le contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Recommandations associées :

Rendre l'image d'arrière-plan adaptative à la taille du navigateur en HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Page HTML, tester l'appel JS à la fonction CArticle suivant：Page HTML, tester l'appel JS à la fonction C

Articles Liés

Voir plus