Estoy tratando de crear una función de alerta con div en lugar de usar alert(). La razón por la que quiero crear mi propia función de alerta es porque quiero tener un css personalizado. La función de alerta es llamada dentro de mi llamada asíncrona
por ejemplo, [simplemente usando un código ficticio como ejemplo] alerta () en realidad pausará mi llamada asíncrona hasta que haga clic en Aceptar, lo que quiero
await example.then(dataTable => { if(condition is true){ alert('this is alert ') } )}ahora quiero imitar la misma funcionalidad con la función de alerta usando el método a continuación
código HTML
<div class="alert_box" id="alert_box" style="visibility:hidden;"> <span class="closebtn" id="closebutton">×</span> <strong>Error : </strong> Records Exceed 150K Records . Aborting Multi Tab Download </div>Código JavaScript dentro de mi llamada asíncrona
if(condition is true){ document.getElementById('alert_box').style.visibility = 'visible' document.getElementById('closebutton').onclick = function(){ console.log("CLICK ME") document.getElementById('alert_box').style.visibility = 'hidden' }Entiendo que la alerta está en el nivel del navegador si no me equivoco, pero ¿hay alguna manera de que podamos lograr el mismo resultado con la función personalizada para imitar la alerta ()?
Se declara el estilo CSS
.alert_box { padding: 20px; background-color: #d82b1e; color: white; } .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; } .closebtn:hover { color: black; }Puede pausar la función que muestra la alerta utilizando la API de Promise. La idea es pasar la devolución de llamada de resolve al controlador de clics del botón de cierre de la alerta para que pueda resolver la promesa y reanudar la ejecución.
Aquí hay un ejemplo en vivo:
let resolvePointer; document.querySelector('#alert_box .closebtn').onclick = function() { this.closest('#alert_box').style.display = 'none'; if (resolvePointer) resolvePointer(); } function myAlert(text) { document.querySelector('#alert_box .text').innerHTML = text; document.getElementById('alert_box').style.display = 'block'; return new Promise(resolve => { resolvePointer = resolve; }); } async function main() { // function will pause until alert is dismissed await myAlert("<strong>Error:</strong> Records Exceed 150K Records. Aborting Multi Tab Download"); console.log("alert dismissed"); } main(); #alert_box { display: none; padding: 20px; background-color: #d82b1e; color: white; } #alert_box .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; } #alert_box .closebtn:hover { color: black; } <div id="alert_box"> <span class="closebtn">×</span> <div class="text"> </div> </div>