-
html结构和css样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { height: 1500px; } .btn { width: 120px; height: 35px; border: none; line-height: 35px; font-size: 16px; background: rgb(97, 195, 234); } .layer { position: absolute; top: 40px; left: 0; width: 100%; height: 1000px; opacity: .5; background-color: black; display: none; } </style> </head> <body> <button class="btn" onclick="test2()">弹出遮罩层</button> <script src="./7.js"></script> <script> //单例模式 function test2() { let myDiv = createDiv(); } </script> </body> </html>
-
js部分
let createDiv = (function() {
let div;return function() { //第一次进去 if (div == undefined) { //创建div遮罩层 div = document.createElement("div"); div.className = 'layer'; document.body.appendChild(div); return div; } //让遮罩层显示 let show = function() { div.style.display = "block"; document.body.style.overflow = "hidden"; } //让show默认执行一次 show(); return div } })() //让函数自执行一次 /* 思路分析: create = 自执行的函数, */
JavaScript弹框的实现(单例模式)
最新推荐文章于 2023-12-04 10:57:08 发布