Crear cuadro de alerta personalizado en JavaScript
- Cree un cuadro de alerta personalizado con jQuery UI
- Cree un cuadro de alerta personalizado con SweetAlert2
- Cree un cuadro de alerta personalizado con una función personalizada
Este artículo le enseñará cómo crear un cuadro de alerta personalizado en JavaScript utilizando jQuery UI, SweetAlert2 y una función de alerta personalizada.
Cree un cuadro de alerta personalizado con jQuery UI
Puede usar jQuery UI para imitar la funcionalidad de la función alert() nativa de JavaScript. Aunque jQuery UI tiene muchas API, puede usar su dialog() API para crear un cuadro de alerta personalizado.
Mientras tanto, a diferencia de la función alert() nativa nativa de JavaScript, puede arrastrar el cuadro de alerta creado con la API dialog().
Hemos importado jQuery, jQuery UI y los estilos CSS para jQuery UI a nuestro código en el siguiente bloque de código. Por lo tanto, podemos usar la API dialog() para crear el cuadro de alerta personalizado.
Mientras tanto, la API dialog() necesita una ubicación en la página web en la que mostrará el cuadro de alerta personalizado. Entonces, usaremos un elemento div HTML con una ID única.
Además, este div debe tener un atributo de título que contenga texto que será el título del cuadro de alerta personalizado. Cuando ejecute el código en su navegador web, observará el cuadro de alerta personalizado creado con la API dialog().
Código:
<head>
<meta charset="utf-8">
<title>Customized alert box with jQueryUI</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
$("#jquery-ui-dialog").dialog();
});
</script>
</head>
<body>
<main style="display: flex; justify-content: center;">
<div id="jquery-ui-dialog" title="A dialog">
<p>You can move this dialog box, or close it with the 'X' sign at the top-right.</p>
</div>
</main>
</body>
Producción:
Cree un cuadro de alerta personalizado con SweetAlert2
SweetAlert2 le permite crear un cuadro de alerta accesible, personalizable y receptivo. Su objetivo es reemplazar los cuadros emergentes de JavaScript, incluida la función nativa alerta () de JavaScript.
Puede usar SweetAlert2 de varias maneras en su proyecto. Sin embargo, para este artículo, lo usaremos con la etiqueta <script> a través de una red de entrega de contenido (CDN).
Por lo tanto, cuando se descarga SweetAlert2, puede usarlo adjuntando un detector de eventos a un botón HTML. Puede llamar al método Swal.fire() y proporcionarle argumentos en el detector de eventos.
El argumento que proporciona a Swal.fire() determina la salida del cuadro de alerta personalizado.
Adjuntamos un detector de eventos a un botón HTML en el siguiente bloque de código. Este botón tiene un atributo de ID HTML de #showAlert.
Hemos usado jQuery para obtener la ID y facilitarle las cosas. Después de eso, llamamos al método Swal.fire() con argumentos que muestran una alerta personalizada.
Código:
<head>
<meta charset="utf-8">
<title>Customized alert box with SweetAlert2</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8/dist/sweetalert2.all.min.js"></script>
<style type="text/css">
button {
padding: 1em;
background-color: #1560bd;
color: #ffffff;
border-radius: 0.2em;
border-style: none;
cursor: pointer;
}
</style>
</head>
<body>
<main>
<button id="showAlert">Click Me</button>
</main>
</body>
<script>
$("#showAlert").click(function(){
Swal.fire(
'Are you done?',
)
});
</script>
Producción:
Cree un cuadro de alerta personalizado con una función personalizada
Puede crear una función personalizada que reemplace el cuadro nativo de alerta () en el navegador web del usuario. Hará esto desde el objeto ventana, y la función personalizada funcionará como tal:
- Establezca constantes para el título de alerta y el texto del botón de alerta.
- Comprobar si un HTML tiene un ID de
alert_container. Si es verdadero, detiene la creación de la alerta personalizada. - Cree el elemento div para el contenedor de alertas y agréguelo al elemento del cuerpo. Después, haz lo siguiente:
- Proporcione al contenedor de alertas un ID de HTML.
- Asigne al contenedor de alertas un nombre de clase HTML.
- Cree un elemento div para el cuadro de alerta y agréguelo al contenedor de alerta. Luego, asígnele un nombre de clase HTML.
- Establezca la posición superior del cuadro de alerta utilizando
scrollTop. - Establezca la posición izquierda del cuadro de alerta utilizando
scrollWidthyoffsetWidth. - Cree un elemento HTML
h1para el título de la alerta. Luego haz lo siguiente:- Cree un nodo de texto para el título de la alerta. Su valor debe ser la constante del título de la alerta.
- Agregue el
h1al cuadro de alerta. - Agregue el nodo de texto al título de la alerta.
- Cree el elemento
botónHTML. Luego haz lo siguiente:- Crear un nodo de texto para el texto del botón. Su valor debe ser la constante del título de la alerta.
- Agregue el texto del botón al elemento
botón. - Agregue el elemento
botónal cuadro de alerta. - Asigne al elemento
botónun nombre de clase único. - Adjunte un detector de eventos al botón. El detector de eventos debe cerrar el cuadro de alerta personalizado.
Además, debe crear una función que elimine la alerta personalizada. Esto debería suceder cuando el usuario hace clic en el botón Aceptar.
La función debe utilizar los siguientes pasos:
- Obtenga el elemento
cuerpoHTML. - Obtenga el contenedor de alertas.
- Utilice el método
removeChildpara eliminar el contenedor de alerta del elemento HTMLbody.
Finalmente, cree estilos CSS para diseñar la función de alerta personalizada. En los bloques de código subsiguientes, encontrará la implementación de lo siguiente:
- La función de alerta personalizada
- La función que lo elimina
- Los estilos CSS para la función de alerta personalizada
Código HTML y JavaScript:
<body>
<input type="button" value = "Say Hello" onclick="alert('Hello');" />
</body>
<script>
// Ensure the user's web browser can run
// JavaScript before creating the custom
// alert box
if (document.getElementById) {
// Swap the native alert for the custom
// alert
window.alert = function (alert_message) {
custom_alert(alert_message);
}
}
function custom_alert(alert_message) {
/* You can utilize the web page address
* for the alert message by doing the following:
const ALERT_TITLE = "The page at " + document.location.href + " says: ";
*/
const ALERT_TITLE = "Alert Message";
const ALERT_BUTTON_TEXT = "OK";
// Check if there is an HTML element with
// an ID of "alert_container".If true, abort
// the creation of the custom alert.
let is_alert_container_exist = document.getElementById("alert_container");
if (is_alert_container_exist) {
return;
}
// Create a div to serve as the alert
// container. Afterward, attach it to the body
// element.
let get_body_element = document.querySelector("body");
let div_for_alert_container = document.createElement("div");
let alert_container = get_body_element.appendChild(div_for_alert_container);
// Add an HTML ID and a class name for the
// alert container
alert_container.id = "alert_container";
alert_container.className = "alert_container"
// Create the div for the alert_box and attach
// it to the alert container.
let div_for_alert_box = document.createElement("div")
let alert_box = alert_container.appendChild(div_for_alert_box);
alert_box.className = "alert_box";
// Set the position of the alert box using
// scrollTop, scrollWidth, and offsetWidth
alert_box.style.top = document.documentElement.scrollTop + "px";
alert_box.style.left = (document.documentElement.scrollWidth - alert_box.offsetWidth) / 2 + "px";
// Create h1 to hold the alert title
let alert_header_tag = document.createElement("h1");
let alert_title_text = document.createTextNode(ALERT_TITLE)
let alert_title= alert_box.appendChild(alert_header_tag);
alert_title.appendChild(alert_title_text);
// Create a paragraph element to hold the
// alert message
let alert_paragraph_tag = document.createElement("p");
let alert_message_container = alert_box.appendChild(alert_paragraph_tag);
alert_message_container.textContent = alert_message;
// Create the OK button
let ok_button_tag = document.createElement("button");
let ok_button_text = document.createTextNode(ALERT_BUTTON_TEXT)
let ok_button = alert_box.appendChild(ok_button_tag);
ok_button.className = "close_btn";
ok_button.appendChild(ok_button_text);
// Add an event listener that'll close the
// custom alert
ok_button.addEventListener("click", function () {
remove_custom_alert();
}, false);
}
function remove_custom_alert() {
let HTML_body = document.querySelector("body");
let alert_container = document.getElementById("alert_container");
HTML_body.removeChild(alert_container);
}
</script>
Código CSS:
.alert_container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #0000004d;
}
.alert_box {
position: relative;
width: 300px;
min-height: 100px;
margin-top: 50px;
border: 1px solid #666;
background-color: #fff;
}
.alert_box h1 {
font-size: 0.9em;
margin: 0;
background-color: #1560bd;
color: #fff;
border-bottom: 1px solid #000;
padding: 2px 0 2px 5px;
}
.alert_box p {
font-size: 0.7em;
height: 50px;
margin-left: 55px;
padding-left: 5px;
}
.close_btn {
width: 70px;
font-size: 0.7em;
display: block;
margin: 5px auto;
padding: 7px;
border: 0;
color: #fff;
background-color: #1560bd;
border-radius: 3px;
cursor: pointer;
}
Producción:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn