En este artículo, vamos a ver cómo podemos implementar un cuadro de diálogo en nuestra página web para algunas acciones determinadas. Esto se puede implementar mediante jQueryUI, que es una colección de varios tipos de componentes de estilo, widgets, efectos, temas y muchos más que se pueden usar con jQuery.
Enlaces jQueryUI CDN: agregue los siguientes enlaces en la etiqueta principal del archivo HTML.
<script src=”https://code.jquery.com/ui/1.13.0/jquery-ui.js”></script> <link rel=”stylesheet” href=”//code.jquery.com/ ui/1.13.0/themes/base/jquery-ui.css”>
Acercarse:
- Crearemos un botón e implementaremos una función que se encargará de abrir el cuadro de diálogo.
- En el cuadro de diálogo, tendremos un botón cerrar y un botón Aceptar , al hacer clic en cualquiera de ellos se cerrará el cuadro de diálogo.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery theme for styling dialog box -->
<link rel="stylesheet"
href=
"//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" />
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<!-- jQuery UI link for creating the dialog box -->
<script src=
"https://code.jquery.com/ui/1.13.0/jquery-ui.js">
</script>
<!-- CSS code -->
<style>
* {
margin: 0;
padding: 0;
}
.main {
height: 100vh;
background-color: rgb(22, 22, 22);
display: flex;
align-items: center;
justify-content: center;
}
button {
height: 40px;
width: 150px;
border-radius: 50px;
border: none;
outline: none;
background-color: rgb(0, 167, 14);
}
button:hover {
background-color: rgb(0, 131, 11);
}
</style>
</head>
<body>
<!-- Content of the dialog box -->
<div class="main">
<div id="dialog" title="Basic dialog">
<p>Application Submitted successfully</p>
</div>
<button id="btn">Submit Application</button>
</div>
<script>
// jQuery Code
$(function() {
$("#dialog").dialog({
// autoOpen will prevent the dialog
// box for opening automatically
// on refreshing the page.
autoOpen: false,
buttons: {
OK: function() {
$(this).dialog("close");
},
},
title: "Application",
});
$("#btn").click(function() {
$("#dialog").dialog("open");
});
});
</script>
</body>
</html>
Producción:
