How to implement mask layer in HTML How to use mask layer in HTML-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to implement mask layer in HTML How to use mask layer in HTML

不言

Jun 05, 2018 pm 04:29 PM

This article mainly introduces in detail the method of implementing a mask layer in HTML. Using a mask layer in a Web page can prevent repeated operations. So how to use a mask layer in HTML? Interested friends can refer to the use of mask layers in

Web pages to prevent repeated operations and prompt loading; you can also simulate pop-up modal windows.

Implementation idea: One p serves as the mask layer, and one p displays the loading dynamic GIF image. In the following sample code, it also shows how to call the display and hiding mask layer in the iframe subpage.

Sample code:

index.html

XML/HTML CodeCopy content to clipboard

<!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="/static/imghwm/default1.png"  data-src="images/loading.gif"  class="lazy"   / alt="How to implement mask layer in HTML How to use mask layer in HTML" >  
    </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 CodeCopy content to clipboard

* {   
    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 CodeCopy content to clipboard

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 Copy content to clipboard

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

Run result:

Initialization

Display mask layer And Loading prompt

Display mask layer and simulate pop-up modal window

The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

Make the background image adaptive to the browser size in HTML

The above is the detailed content of How to implement mask layer in HTML How to use mask layer in HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is the difference between an HTML tag and an HTML attribute?May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

The Future of HTML: Evolution and TrendsMay 13, 2025 am 12:01 AM

The future of HTML will develop in a more semantic, functional and modular direction. 1) Semanticization will make the tag describe the content more clearly, improving SEO and barrier-free access. 2) Functionalization will introduce new elements and attributes to meet user needs. 3) Modularity will support component development and improve code reusability.

Why are HTML attributes important for web development?May 12, 2025 am 12:01 AM

HTMLattributesarecrucialinwebdevelopmentforcontrollingbehavior,appearance,andfunctionality.Theyenhanceinteractivity,accessibility,andSEO.Forexample,thesrcattributeintagsimpactsSEO,whileonclickintagsaddsinteractivity.Touseattributeseffectively:1)Usese

What is the purpose of the alt attribute? Why is it important?May 11, 2025 am 12:01 AM

The alt attribute is an important part of the tag in HTML and is used to provide alternative text for images. 1. When the image cannot be loaded, the text in the alt attribute will be displayed to improve the user experience. 2. Screen readers use the alt attribute to help visually impaired users understand the content of the picture. 3. Search engines index text in the alt attribute to improve the SEO ranking of web pages.

HTML, CSS, and JavaScript: Examples and Practical ApplicationsMay 09, 2025 am 12:01 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML is used to build web page structure; 2. CSS is used to beautify the appearance of web pages; 3. JavaScript is used to achieve dynamic interaction. Through tags, styles and scripts, these three together build the core functions of modern web pages.

How do you set the lang attribute on the tag? Why is this important?May 08, 2025 am 12:03 AM

Setting the lang attributes of a tag is a key step in optimizing web accessibility and SEO. 1) Set the lang attribute in the tag, such as. 2) In multilingual content, set lang attributes for different language parts, such as. 3) Use language codes that comply with ISO639-1 standards, such as "en", "fr", "zh", etc. Correctly setting the lang attribute can improve the accessibility of web pages and search engine rankings.

What is the purpose of HTML attributes?May 07, 2025 am 12:01 AM

HTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform

How do you create a list in HTML?May 06, 2025 am 12:01 AM

TocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055612 fails to install in Windows 10?

1 months agoByDDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks agoByDDD

Nordhold: Fusion System, Explained

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Atom editor mac version download

The most popular open source editor

SublimeText3 English version

Recommended: Win version, supports code prompts!

Zend Studio 13.0.1

Powerful PHP integrated development environment

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Dreamweaver Mac version

Visual web development tools

Hot Topics

1676

1429

1333

1278

1257