How to implement pop-up layer in javascript-Front-end Q&A-php.cn

How to implement pop-up layer in javascript

藏色散人

Release： 2023-02-10 10:21:44

Original

1820 people have browsed it

Javascript method to implement a pop-up layer: 1. Create an HTML sample file; 2. Hide the content to be displayed first, and after the click condition is triggered, display the originally hidden content, with code such as "document. getElementById("open").onclick = function(e){...}"; 3. Provide a mask layer to cover all the original page content.

How to implement pop-up layer in javascript

The operating environment of this tutorial: Windows 10 system, javascript version 1.8.5, Dell G3 computer.

How to implement pop-up layer in javascript?

Use JAVASCRIPT to achieve the pop-up layer effect

Statement

Reading this article requires a certain amount of HTML, CSS and JavaScript Basics

Design

The idea of implementing the pop-up layer effect is very simple: hide the content to be displayed first, and after triggering a certain condition (such as clicking a button), Reveal previously hidden content.

Implementation

<!DOCTYPE html>
<html>
<head>
    <title>Window对象</title>
    <meta charset="utf-8">
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<button type="button" id="open">打开弹出层</button>
<div style="display: none;background: lightblue;border:1px solid green;" id="toast">         <!--     设置display属性为none以隐藏内容             -->
    <p>这里是弹出层内容</p>
    <button type="button" id="close">关闭弹出层</button>
</div>
<script type="text/javascript">
    var toast = document.getElementById("toast");
    document.getElementById("open").onclick = function(e){           <!--    定义点击事件显示隐藏内容          -->
        toast.style.display = "block";
        toast.style.position = "fixed";
        var winWidth = window.innerWidth;
        var winHeight = window.innerHeight;
        var targetWidth = toast.offsetWidth;
        var targetHeight = toast.offsetHeight;
        toast.style.top = (winHeight - targetHeight) / 2 + "px";
        toast.style.left = (winWidth - targetWidth) / 2 + "px";
    }
    document.getElementById("close").onclick = function(e){               <!--      将显示的内容再次隐藏         -->
        toast.style.display = "none";
    }
</script>
</body>
</html>

Copy after login

The display effect is as follows:

How to implement pop-up layer in javascript

But we can notice that after popping up the hidden content, we can still enter the Baidu page through the link. In order to prevent this from happening, we can provide a mask layer to cover all the original page content. The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Window对象</title>
    <meta charset="utf-8">
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<button type="button" id="open">打开弹出层</button>
<div id="cover" style="display: none;position: fixed;width: 100%;height: 100%;top:0px;left:0px;background: gray;">       <!-- 通过遮罩层遮住背景 -->
    <div style="background: lightblue;border:1px solid green;" id="toast">         <!-- 设置display属性为none以隐藏内容             -->
   　　<p>这里是弹出层内容</p>
    　 <button type="button" id="close">关闭弹出层</button>
　　</div>
</div>
<script type="text/javascript">
    var toast = document.getElementById("toast");
    var cover = document.getElementById("cover");
    document.getElementById("open").onclick = function(e){           <!--    定义点击事件显示隐藏内容          -->
        cover.style.display = "block";
        toast.style.position = "fixed";
        var winWidth = window.innerWidth;
        var winHeight = window.innerHeight;
        var targetWidth = toast.offsetWidth;
        var targetHeight = toast.offsetHeight;
        toast.style.top = (winHeight - targetHeight) / 2 + "px";
        toast.style.left = (winWidth - targetWidth) / 2 + "px";
    }
    document.getElementById("close").onclick = function(e){               <!--      将显示的内容再次隐藏         -->
        cover.style.display = "none";
    }
</script>
</body>
</html>

Copy after login

This is to test the effect again, as shown below:

How to implement pop-up layer in javascript

Summary

The above content The pop-up layer effect is simply implemented, but more complex functions can be implemented on this basis by adding more code.

Recommended learning: "JavaScript Video Tutorial"

The above is the detailed content of How to implement pop-up layer in javascript. For more information, please follow other related articles on the PHP Chinese website!