statement
Reading this article requires a certain basic HTML, CSS and JavaScript
design
The idea of achieving the pop-up layer effect is very simple: hide the content to be displayed first, and display the originally hidden content after triggering a certain condition (such as clicking a button).
accomplish
<!DOCTYPE html><html><head> <title>Window object</title> <meta charset="utf-8"></head><body><a href="http://www.baidu.com">Baidu</a><button type="button" id="open">Open the pop-up layer</button><div style="display: none;background: lightblue;border:1px solid green;" id="toast"> <!-- Set the display attribute to none to hide content--> <p>This is the pop-up layer content</p> <button type="button" id="close">Close the pop-up layer</button></div><script type="text/javascript"> var toast = document.getElementById("toast"); document.getElementById("open").onclick = function(e){ <!-- Define the click event to display hidden content--> 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){ <!-- Hide the displayed content again-> toast.style.display = "none"; }</script></body></html>The display effect is as follows:
But we can notice that after the hidden content pops up, we can still enter the Baidu page through the link. 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 object</title> <meta charset="utf-8"></head><body><a href="http://www.baidu.com">Baidu</a><button type="button" id="open">Open the pop-up layer</button><div id="cover" style="display: none;position: fixed;width: 100%;height: 100%;top:0px;left:0px;background: gray;"> <!-- Mask the background through the mask layer--> <div style="background: lightblue;border:1px solid green;" id="toast"> <!-- Set display attribute to none to hide content--> <p>Here is the pop-up layer content</p> <button type="button" id="close">Close the pop-up layer</button> </div></div><script type="text/javascript"> var toast = document.getElementById("toast"); var cover = document.getElementById("cover"); document.getElementById("open").onclick = function(e){ <!-- Define the click event to display hidden content--> 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){ <!-- Hide the displayed content again->cover.style.display = "none"; }</script></body></html>This is the following test result again, as shown in the figure below:
Summarize
The above content simply implements the pop-up layer effect, but by adding more code, more complex functions can be implemented on this basis.
The above simple example of using JavaScript to achieve pop-up layer effect is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.