Home > Article > Web Front-end > How to implement pop-up layer in javascript
How to implement pop-up layer in javascript
- 藏色散人Original
- 2023-02-10 10:21:441714browse
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.
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>
The display effect is as follows:
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>This is to test the effect again, as shown below:
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!