検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLでマスクレイヤーを実装する方法 HTMLでマスクレイヤーを使用する方法

HTMLでマスクレイヤーを実装する方法 HTMLでマスクレイヤーを使用する方法

不言
不言オリジナル
2018-06-05 16:29:175612ブラウズ

この記事では、主に HTML でマスク レイヤーを実装する方法を詳しく紹介します。Web ページでマスク レイヤーを使用すると、繰り返し操作を防ぐことができます。興味のある方は、

を参照してください。Web ページでマスク レイヤーを使用すると、操作の繰り返しを防ぎ、ポップアップ モーダル ウィンドウをシミュレートすることもできます。

実装アイデア: 1つのpはマスクレイヤーとして機能し、1つの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コードコンテンツをクリップボードにコピー

rrreええ

index .js

JavaScriptコードコンテンツをクリップボードにコピー

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

body.html

XML/HTMLコードコンテンツをクリップボードにコピー

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;);   
}

実行結果:

初期化

ディスプレイマスクレイヤーと読み込みプロンプト

マスクレイヤーを表示してポップアップモーダルウィンドウをシミュレート

上記がこの記事の全内容です。皆様の学習に役立つことを願っています。

関連する推奨事項:

HTML で背景画像をブラウザのサイズに適応させる

以上がHTMLでマスクレイヤーを実装する方法 HTMLでマスクレイヤーを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML ページ、C 関数への JS 呼び出しのテスト次の記事：HTML ページ、C 関数への JS 呼び出しのテスト

関連記事

続きを見る