El cuadro de diálogo es la forma de informar al usuario sobre algo. Es una buena manera de aparecer en la ventana del usuario para mostrar la información que sucederá en el próximo o cualquier tipo de información que el desarrollador quiera aclarar al usuario que debería saber. El método de diálogo jQueryUI se usa para crear una ventana de diálogo básica dentro de la página. Tiene una barra de título y un área de contenido y se puede mover, cambiar de tamaño y cerrar con el icono ‘X’ de forma predeterminada.
Sintaxis:
$(selector, context).dialog(options)
Nota: Podemos personalizar el cuadro de diálogo sin pasar por varias opciones dentro de la función de diálogo en el código. Si hay más de una opción, podemos pasarlas separadas por comas. Podemos agregarle ciertas funcionalidades de la siguiente manera.
$(selector, context).dialog({option1: value1, option2: value2... })
Parámetros: Hay un solo parámetro aceptado por el diálogo de jQuery mencionado anteriormente y descrito a continuación:
- opciones: este parámetro es un objeto que especifica la apariencia y el comportamiento de la ventana.
Los siguientes ejemplos ilustran el cuadro de diálogo jQueryUI .
Ejemplo 1: este ejemplo no contiene un botón con la opción en blanco.
<!DOCTYPE html>
<html>
<head>
<title>jQueryUI-Dialog</title>
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet"
href="/resources/demos/style.css">
<script src=
"https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script>
$(function() {
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<h1 style="color:green;">GeeksforGeeks</h1>
<h4>JQueryUI dialog box</h4>
<p>This is a sample dialog box.</p>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo contiene un botón con el valor de cierre.
<!DOCTYPE html>
<html>
<head>
<title>jQueryUI-Dialog</title>
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet"
href="/resources/demos/style.css">
<script src=
"https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script>
$(function() {
$("#dialog").dialog({
buttons: {
OK: function() {
$(this).dialog("close");
}
},
title: "Dialog box title"
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<h1 style="color:green;">GeeksforGeeks</h1>
<h4>JQueryUI dialog box</h4>
<p>A Computer Science Portal for Geeks</p>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el cuadro de diálogo JQueryUI se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por SnehashishKalamkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA