Ideas:
• Create a mask, set the stacking order of the mask to ensure that other elements can be covered
position: absolute;top: 0;left: 0;display: none;background-color: rgba(9, 9, 9, 0.63);width: 100%;height: 100%;z-index: 1000; •Set the background color and display format of the content in the mask width: 50%;text-align: center;background: #ffffff;border-radius: 6px;margin: 100px auto;line-height: 30px;z-index: 10001; •Binding event, dynamically switch the display attribute function showModel() of the mask {document.getElementById('myModel').style.display = 'block';}function closeModel() {document.getElementById('myModel').style.display = 'none';}Note: The mask should be absolutely positioned, the width and height should occupy the entire page, and the stacking order should be large.
source code
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Mask</title><style>.container {width: 900px;margin: 50px auto;text-align: center;}#myModel {position: absolute;top: 0;left: 0;display: none;background-color: rgba(9, 9, 9, 0.63);width: 100%;height: 100%;z-index: 1000;}.model-content {width: 50%;text-align: center;background: #ffffff;border-radius: 6px;margin: 100px auto;line-height: 30px;z-index: 10001;}</style></head><body><div><button onclick="showModel()">Pop up mask</button><div id="myModel" onclick="closeModel()"><div><p>Hello, I'm the content~~</p><p><button id="closeModel" onclick="closeModel()">Close</button></p></div></div><script>function showModel() {document.getElementById('myModel').style.display = 'block';}function closeModel() {document.getElementById('myModel').style.display = 'none';}</script></body></html>The above is the simple implementation code of the JavaScript mask (model) function introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!