Esencialmente, estoy tratando de recrear las funciones de "alerta" y "aviso", pero en una sola función que usa una ventana modal. Lo tengo configurado para que cuando uno de los parámetros de la función se establezca en 1, agregue un campo de texto a la ventana modal y registre el valor de ese campo de texto cuando se cierre. Tengo problemas para que cuando se abra la ventana, el programa espere hasta que la ventana se vuelva a cerrar. ¿Cómo puedo hacer esto?
Debe aprender a usar async y esperar con una promesa. La idea básica a continuación muestra cómo se usa la promesa con el controlador de eventos para indicar que se hace clic.
const myAlert = async(message) => { return new Promise((resolve) => { var modal = document.createElement("div"); modal.classList.add("modal"); modal.innerHTML = ` <div class="modal-content"> <span class="close">×</span> <p>${message}</p> </div> `; modal.querySelector(".close").addEventListener("click", function() { modal.remove(); resolve(); }); document.body.append(modal); }); } (async function() { console.log('before'); await myAlert('Hello there'); console.log('after'); })(); .modal { display: block; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }