Tengo una página web con muchos botones y he creado una ventana emergente personalizada que debería aparecer en el centro de la pantalla cuando se hace clic en un botón. Lo ideal es que la pantalla se oscurezca cuando aparece la ventana y puede hacer clic en cualquier lugar de la pantalla para que la ventana desaparezca.
¿Cómo se hace esto? A continuación se muestra un fragmento de mis botones + la ventana emergente que me gustaría mostrar cuando se presiona un botón. Sin embargo, la ventana CSS tiene display:hidden en este momento.
var containerDiv = document.querySelector("#main"); let tempCounterBtn = 0; for (let i = 0; i < 2; i++) { let newDiv = document.createElement("div"); newDiv.id = "div-" + (i + 1); containerDiv.appendChild(newDiv); for (let x = 0; x < 6; x++) { let btn = document.createElement("button"); btn.id = "button-" + (tempCounterBtn + 1); tempCounterBtn++; newDiv.appendChild(btn); } } body { display: flex; justify-content: center; margin: 1.2em; } button { background: rgba(0, 0, 0, 0); color: #a5afaa; border: 1px solid white; border-radius: .6em; padding: 3em; } button:hover { border-color: #fff8cc; box-shadow: 0em 0em 1em 0em yellow; } #main { border: solid 2px #939388; border-radius: 10px; background-color: #0f0f3de8; box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6); } .inner { display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 20px; } .smallFrame { display: none; border: solid 2px #939388; border-radius: 10px; background-color: #0f0f3de8; box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6); width: 400px; height: 250px; } <div id="main"> <div id="inner-15" class="inner"></div> </div> <div class="smallFrame"></div> div#main se ha cambiado a dialog#main . <dialog> es una etiqueta HTML incorporada y normalmente está oculta a menos que tenga el atributo open o haya sido abierto por uno de sus métodos, ya sea .showModal() o .show() . .showModal() es lo que le interesaría porque hay una propiedad CSS especial que solo se aplica a los fondos de pantalla completa o al fondo de un cuadro de diálogo: se llama apropiadamente ::backdrop (vea CSS de ejemplo).
Se agregaron 2 botones, uno para cerrar el <dialog> y otro para abrirlo.
Se agregó un flag que es true para comenzar, luego, una vez que se abre el <dialog> , la función de generación de botones comienza y luego ese indicador se establece en false . Tuve que detenerlo porque no estoy seguro de si querías que siguiera haciendo botones cada vez que se abre el <dialog> o no. De todos modos, la flag se quita fácilmente o puede ajustar las condiciones en las que se establece la flag .
const modal = document.querySelector(".smallFrame"); const show = document.querySelector('.show'); const hide = document.querySelector('.hide'); let flag = true; show.onclick = popUp; hide.onclick = e => modal.close(); function popUp(e) { modal.showModal(); if (!flag) { return; } let tempCounterBtn = 0; for (let i = 0; i < 2; i++) { let newDiv = document.createElement("div"); newDiv.id = "div-" + (i + 1); modal.appendChild(newDiv); for (let x = 0; x < 6; x++) { let btn = document.createElement("button"); btn.id = "button-" + (tempCounterBtn + 1); tempCounterBtn++; newDiv.appendChild(btn); } } flag = false; } html { font: 300 2ch/1.25 'Segoe UI' } body { display: flex; justify-content: center; margin: 1.2em; } button { background: rgba(0, 0, 0, 0); color: #a5afaa; border: 1px solid white; border-radius: .6em; padding: 3em; } button:hover { border-color: #fff8cc; box-shadow: 0em 0em 1em 0em yellow; } #main { border: solid 2px #939388; border-radius: 10px; background-color: #0f0f3de8; box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6); } #main::backdrop { background: rgba(0, 0, 0, 0.5); } .inner { display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 20px; } .smallFrame { border: solid 2px #939388; border-radius: 10px; background-color: #0f0f3de8; box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6); width: 400px; height: 250px; } .hide { padding: 0.5em; float: right; } .show:hover, .hide:hover { border-color: #fff8cc; box-shadow: 0em 0em 1em 0em lime; cursor: pointer; } <div id="main"> <div id="inner-15" class="inner"></div> </div> <button class='show'>Show</button> <dialog class="smallFrame"> <button class='hide'>Close</button> </dialog>