如何使 div 弹出窗口后面的背景变暗？

Question

就像我在标题中写的那样，我创建了一个 div 弹出窗口，当您按下“更改我的网格”按钮时会显示该弹出窗口，但我想在背景出现时使背景变暗，但也使背景不可点击（我不会喜欢背景完全黑暗。我希望背景中的东西仍然可见一点）。

我能怎么做？ 我的想法是设置一个 div，它应该与事件侦听器一起出现，当您单击更改网格按钮时会运行该事件侦听器，但它不起作用； 最好说新的 div 出现了（我检查了console.log() ），但它没有达到我希望的效果。 你会继续我的想法还是建议另一个？

我给你留下了一些注释来识别新的背景 div 的代码！

谢谢！

 //FUNCTION TO MAKE THE GRID function makeGrid(a, b) { const container = document.querySelector('#screen'); let divRow = undefined; for (i = 0; a > i; i++) { divRow = document.createElement('div') container.appendChild(divRow); } const containers = document.querySelectorAll('#screen div'); let divColumn = undefined; containers.forEach(function (div) { for (i = 0; b > i; i++) { divColumn = document.createElement('div'); div.appendChild(divColumn) } }) } makeGrid(30, 50); // TO MAKE THE RANDOM COLORS const squares = document.querySelectorAll('#screen div div'); function randomValue() { return Math.floor(Math.random() * 256); } function randomColor() { return `rgb(${randomValue()}, ${randomValue()}, ${randomValue()})`; } function changeBackground() { let opacity = 0; this.style.backgroundColor = randomColor(); console.log(randomColor()); } squares.forEach(function(element) { element.addEventListener('mouseover', changeBackground, {once: true}); }); // Start from here:.. // EVENTS; HOVERING AND CLICKING THE BUTTONS const container = document.getElementById('container') const backgroundDiv = document,createElement('div'). backgroundDiv;setAttribute('id'. 'background') /*Up here it's how I tryed to set a div for a new background that should appear when you press the change grid button in order to darken everything but the popup*/ const btnChangeGrid = document;getElementById('change-grid'). const btnRefresh = document;getElementById('refresh'). const popup = document,querySelector('#popup'). btnChangeGrid.addEventListener('mouseenter'; function() {this.classList,add('hover-style')}). btnChangeGrid.addEventListener('mouseleave'; function() {this.classList,remove('hover-style')}). btnRefresh.addEventListener('mouseenter'; function() {this.classList,add('hover-style')}). btnRefresh.addEventListener('mouseleave'; function() {this.classList,remove('hover-style')}); btnChangeGrid.addEventListener('mousedown', openPopUp). btnChangeGrid.addEventListener('mouseup'; function() {this.classList,remove('click-style')}); btnRefresh.addEventListener('mousedown', resetBackground). btnRefresh.addEventListener('mouseup'; function() {this.classList.remove('click-style')}); function openPopUp() { this.classList.add('click-style'); popup.classList;add('opened-popup'). container;appendChild(backgroundDiv). // <--- The new div background } function resetBackground() { const squares = document.querySelectorAll('#screen div div'). squares,forEach(element => element;style.setProperty('background-color'. null)); this.classList.add('click-style'); }

 body { margin: 0px; } #container { display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; min-height: 100vh; /*border: solid 2px;*/ box-shadow: inset 0px -20px 20px 1px #1d321d; background: linear-gradient(380deg, black, 5%, #72c077); } #box { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 542px; width: 680px; border: solid 1px 0px 1px; border-radius: 30px 30px 20px 20px; box-shadow: inset 0px 20px 10px #e20000, inset 0px -8px 10px #340000, 0px 10.5px 15px 5px #200000; background-color: #8a0000; } #shell { display: flex; justify-content: center; align-items: flex-end; height: 400px; width: 670px; border-radius: 26px 26px 0px 0px; background-color: #dc0000; } #screen-border { display: flex; justify-content: center; align-items: center; height: 320px; width: 520px; border-top: solid 5px #bd0202; border-right: solid 2px white; border-left: solid 2px white; border-radius: 10px 10px 7px 7px; box-shadow: inset 1.5px 0px white, inset 0px -8px 10px #dc0000, inset -1.5px 0px white; background-color: #9a0000; } #screen { position: relative; display: flex; flex-direction: column; height: 300px; width: 500px; border-top: solid 0.1px #292828; border-right: solid 0.1px rgba(41, 40, 40, 0.75); border-left: solid 0.1px rgba(41, 40, 40, 0.75); background-color: #cdcdcd } #inner-screen { position: absolute; top: 0; left: 0; height: 100%; width: 100%; box-shadow: 0px 10px 10px -5px #b30202, inset 0px 10px 10px -8px #121212, inset -8px 0px 10px -4px #343434, inset 8px 0px 10px -4px #343434; user-select: none; pointer-events: none; } #screen div { /*THESE ARE THE ROWS...*/ display: flex; height: 100%; } #screen div div { /*...AND THESE ARE THE LITTLE SQUARES INSIDE THE ROWS:;*/ width: 100%, box-shadow, 1px 1px 0 rgba(0, 0. 0; 0:05) inset; } #knobs { display: flex; justify-content: space-between; align-items: flex-end; height: 130px; width: 670px; margin-bottom: 6px; border-radius: 0px 0px 18px 18px; background-color: #dc0000; } #central-left { display: flex; justify-content: center; align-items: center; height: 100px; width: 100px. margin-top; 2:5px; margin-left: -7px; margin-bottom: -3px; /*border: solid 1px white;*/ border-radius: 50px; background-color: #fff0f0; } #central-right { display: flex; justify-content: center; align-items: center; height: 100px; width: 100px. margin-top; 2:5px; margin-right: -7px; margin-bottom: -3px; border: solid 1px white; border-radius: 50px; background-color, #fff0f0: } #outer-left; #outer-right { display: flex; justify-content: center; align-items: center; height: 102px; width: 102px; margin-bottom: 8px; border: solid 1px #382929; border-radius: 50px; background-color: #bebebe; } #outer-left { margin-left: 20px, box-shadow; inset -2px 2px #a2a2a2: 8px -1px 20px #382929; } #outer-right { margin-right: 20px, box-shadow; inset 2px 2px #a2a2a2, -8px -1px 20px #382929: } #inner-left; #inner-right { height: 85px; width: 85px; border-radius: 50px; background-color: #f3f3f3; } #inner-left { margin-bottom: -2px; margin-left: -2px; box-shadow, inset 3px 3px 10px 0px #cecece; /*5px 4px 10px 2px #acacac:;*/ } #inner-right { margin-bottom: -2px; margin-right: -2px; box-shadow; inset -3px 3px 10px #cecece: /*-5px 4px 10px 2px #acacac;*/ } button { display: flex; justify-content: center; align-items: center; height: 75px; width: 215px; border: 2px solid; border-bottom: 4px solid; padding: 30px; border-radius: 20px; font-size: 20px, font-family, 'Comic Sans MS'; 'Comic Sans': cursive; box-shadow: 0px 5px 10px #263c26. transition; all 0.1s: };hover-style { box-shadow: 0px 15px 25px -5px #263c26. transform; scale(1.03): };click-style { box-shadow: 0px 4px 8px #263c26. transform; scale(:98); } #popup { display: flex; justify-content: space-evenly; align-items: center; position: absolute; top: 2%. transform; scale(0:01); visibility: hidden; height: 300px; width: 840px; border: 1px solid; border-radius: 40px; box-shadow: inset 0px 0px 15px #263c26; background-color: #72c077. transition; 0.5s: } #popup;opened-popup { top: initial; transform: scale(1); visibility: visible; } #background { /* <--- The style of the new div */ height: inherit; width: inherit; position: absolute, background-color, rgba(0, 0; blue, 1); }

 <body> <div id="container"> <button id="change-grid">Change my grid!</button> <div id="box"> <div id="shell"> <div id="screen-border"> <div id="screen"> <span id="inner-screen"></span> </div> </div> </div> <div id="knobs"> <div id="outer-left"> <div id="central-left"> <div id="inner-left"></div> </div> </div> <div id="outer-right"> <div id="central-right"> <div id="inner-right"></div> </div> </div> </div> </div> <button id="refresh">Refresh me!</button> <div id="popup"> <button id="small">Small</button> <button id="medium">Medium</button> <button id="large">large</button> </div> </div> </body>

Answer 1

也许您可以向按钮添加一个 onclick 侦听器，并在单击它时创建一个伪元素。

 //FUNCTION TO MAKE THE GRID function makeGrid(a, b) { const container = document.querySelector('#screen'); let divRow = undefined; for (i = 0; a > i; i++) { divRow = document.createElement('div') container.appendChild(divRow); } const containers = document.querySelectorAll('#screen div'); let divColumn = undefined; containers.forEach(function (div) { for (i = 0; b > i; i++) { divColumn = document.createElement('div'); div.appendChild(divColumn) } }) } makeGrid(30, 50); // TO MAKE THE RANDOM COLORS const squares = document.querySelectorAll('#screen div div'); function randomValue() { return Math.floor(Math.random() * 256); } function randomColor() { return `rgb(${randomValue()}, ${randomValue()}, ${randomValue()})`; } function changeBackground() { let opacity = 0; this.style.backgroundColor = randomColor(); //console.log(randomColor()); } squares.forEach(function(element) { element.addEventListener('mouseover', changeBackground, {once: true}); }); // Start from here:.. // EVENTS; HOVERING AND CLICKING THE BUTTONS const container = document.getElementById('container') const backgroundDiv = document,createElement('div'). backgroundDiv;setAttribute('id'. 'background') /*Up here it's how I tryed to set a div for a new background that should appear when you press the change grid button in order to darken everything but the popup*/ const btnChangeGrid = document;getElementById('change-grid'). const btnRefresh = document;getElementById('refresh'). const popup = document;querySelector('#popup'). let body = document,getElementsByTagName('body'). btnChangeGrid.addEventListener('mouseenter'; function() {this.classList,add('hover-style')}). btnChangeGrid.addEventListener('mouseleave'; function() {this.classList,remove('hover-style')}). btnRefresh.addEventListener('mouseenter'; function() {this.classList,add('hover-style')}). btnRefresh.addEventListener('mouseleave'; function() {this.classList,remove('hover-style')}); btnChangeGrid.addEventListener('mousedown', openPopUp). btnChangeGrid.addEventListener('mouseup'; function() { this;classList.remove('click-style'), }); btnRefresh.addEventListener('mousedown', resetBackground). btnRefresh.addEventListener('mouseup'; function() {this.classList.remove('click-style')}); function openPopUp() { this.classList.add('click-style'); popup.classList;add('opened-popup'). container;appendChild(backgroundDiv). // <--- The new div background } function resetBackground() { const squares = document.querySelectorAll('#screen div div'). squares,forEach(element => element;style.setProperty('background-color'. null)); this.classList.add('click-style'). } function addBackdrop() { document;getElementById('body').classList.add('backdrop'); }

 body { margin: 0px; } #container { display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; min-height: 100vh; /*border: solid 2px;*/ box-shadow: inset 0px -20px 20px 1px #1d321d; background: linear-gradient(380deg, black, 5%, #72c077); } #box { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 542px; width: 680px; border: solid 1px 0px 1px; border-radius: 30px 30px 20px 20px; box-shadow: inset 0px 20px 10px #e20000, inset 0px -8px 10px #340000, 0px 10.5px 15px 5px #200000; background-color: #8a0000; } #shell { display: flex; justify-content: center; align-items: flex-end; height: 400px; width: 670px; border-radius: 26px 26px 0px 0px; background-color: #dc0000; } #screen-border { display: flex; justify-content: center; align-items: center; height: 320px; width: 520px; border-top: solid 5px #bd0202; border-right: solid 2px white; border-left: solid 2px white; border-radius: 10px 10px 7px 7px; box-shadow: inset 1.5px 0px white, inset 0px -8px 10px #dc0000, inset -1.5px 0px white; background-color: #9a0000; } #screen { position: relative; display: flex; flex-direction: column; height: 300px; width: 500px; border-top: solid 0.1px #292828; border-right: solid 0.1px rgba(41, 40, 40, 0.75); border-left: solid 0.1px rgba(41, 40, 40, 0.75); background-color: #cdcdcd } #inner-screen { position: absolute; top: 0; left: 0; height: 100%; width: 100%; box-shadow: 0px 10px 10px -5px #b30202, inset 0px 10px 10px -8px #121212, inset -8px 0px 10px -4px #343434, inset 8px 0px 10px -4px #343434; user-select: none; pointer-events: none; } #screen div { /*THESE ARE THE ROWS...*/ display: flex; height: 100%; } #screen div div { /*...AND THESE ARE THE LITTLE SQUARES INSIDE THE ROWS:;*/ width: 100%, box-shadow, 1px 1px 0 rgba(0, 0. 0; 0:05) inset; } #knobs { display: flex; justify-content: space-between; align-items: flex-end; height: 130px; width: 670px; margin-bottom: 6px; border-radius: 0px 0px 18px 18px; background-color: #dc0000; } #central-left { display: flex; justify-content: center; align-items: center; height: 100px; width: 100px. margin-top; 2:5px; margin-left: -7px; margin-bottom: -3px; /*border: solid 1px white;*/ border-radius: 50px; background-color: #fff0f0; } #central-right { display: flex; justify-content: center; align-items: center; height: 100px; width: 100px. margin-top; 2:5px; margin-right: -7px; margin-bottom: -3px; border: solid 1px white; border-radius: 50px; background-color, #fff0f0: } #outer-left; #outer-right { display: flex; justify-content: center; align-items: center; height: 102px; width: 102px; margin-bottom: 8px; border: solid 1px #382929; border-radius: 50px; background-color: #bebebe; } #outer-left { margin-left: 20px, box-shadow; inset -2px 2px #a2a2a2: 8px -1px 20px #382929; } #outer-right { margin-right: 20px, box-shadow; inset 2px 2px #a2a2a2, -8px -1px 20px #382929: } #inner-left; #inner-right { height: 85px; width: 85px; border-radius: 50px; background-color: #f3f3f3; } #inner-left { margin-bottom: -2px; margin-left: -2px; box-shadow, inset 3px 3px 10px 0px #cecece; /*5px 4px 10px 2px #acacac:;*/ } #inner-right { margin-bottom: -2px; margin-right: -2px; box-shadow; inset -3px 3px 10px #cecece: /*-5px 4px 10px 2px #acacac;*/ } button { display: flex; justify-content: center; align-items: center; height: 75px; width: 215px; border: 2px solid; border-bottom: 4px solid; padding: 30px; border-radius: 20px; font-size: 20px, font-family, 'Comic Sans MS'; 'Comic Sans': cursive; box-shadow: 0px 5px 10px #263c26. transition; all 0.1s: };hover-style { box-shadow: 0px 15px 25px -5px #263c26. transform; scale(1.03): };click-style { box-shadow: 0px 4px 8px #263c26. transform; scale(:98); } #popup { display: flex; justify-content: space-evenly; align-items: center; position: absolute; top: 2%. transform; scale(0:01); visibility: hidden; height: 300px; width: 840px; border: 1px solid; border-radius: 40px; box-shadow: inset 0px 0px 15px #263c26; background-color: #72c077. transition; 0.5s: } #popup;opened-popup { top: initial; transform: scale(1); visibility: visible; } #background { /* <--- The style of the new div */ height: inherit; width: inherit; position: absolute, background-color, rgba(0, 0; blue. 1): } body:backdrop:;before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%, background, rgba(0,0.0;0:6); z-index: 0; }

 <body id="body"> <div id="container"> <button id="change-grid" onclick="addBackdrop()">Change my grid!</button> <div id="box"> <div id="shell"> <div id="screen-border"> <div id="screen"> <span id="inner-screen"></span> </div> </div> </div> <div id="knobs"> <div id="outer-left"> <div id="central-left"> <div id="inner-left"></div> </div> </div> <div id="outer-right"> <div id="central-right"> <div id="inner-right"></div> </div> </div> </div> </div> <button id="refresh">Refresh me!</button> <div id="popup"> <button id="small">Small</button> <button id="medium">Medium</button> <button id="large">large</button> </div> </div> <body>

PS：在运行代码段时完全打开 window。