En este artículo, aprenderemos cómo eliminar el botón de cierre en el cuadro de diálogo de la interfaz de usuario de jQuery usando JavaScript. Esto se puede lograr usando el método hide() . jQuery UI es un conjunto seleccionado de interacciones de interfaz de usuario, efectos, widgets y temas creados sobre la biblioteca jQuery JavaScript. Un cuadro de diálogo es una ventana temporal. Una aplicación crea un cuadro de diálogo para recuperar la entrada del usuario, solicita al usuario información adicional para los elementos del menú.
Sintaxis:
$("Selector").dialog();
Acercarse:
- En primer lugar, agregue los siguientes enlaces CDN de jQuery y JQuery UI al script o descárguelos a su máquina local.
<script src=”http://code.jquery.com/jquery-2.1.3.js”></script>
<script src=”http://code.jquery.com/ui/1.11.2/jquery -ui.js”></secuencia de comandos> - Cree un div en el cuerpo, para el cuadro de diálogo y mantenga la identificación como demoDialog.
- Ahora, usando el método jQuery dialog(), cree el diálogo jQuery UI.
Ejemplo 1: Este ejemplo ilustra el cuadro de diálogo con un botón de cierre.
HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog : demo dialog</title>
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css">
<script src=
"https://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"https://code.jquery.com/ui/1.11.2/jquery-ui.js">
</script>
<script>
$(document).ready(function() {
$("#demoDialog").dialog();
});
</script>
</head>
<body>
<h1> Dialog Widget with Close button</h1>
<div id="demoDialog" title="My Dialog Box">
<p>Welcome to GeeksforGeeks</p>
</div>
</body>
</html>
Producción:
Aquí, veremos la eliminación del botón de cierre en el cuadro de diálogo de la interfaz de usuario de jQuery usando JavaScript.
Sintaxis:
$("Selector").dialog({
open: function () { $(".ui-dialog-titlebar-close").hide(); }
});
Enfoque: Cree un div en el cuerpo, para el cuadro de diálogo y mantenga la identificación como demoDialog . Ahora, usando el método jQuery dialog() , cree el diálogo jQuery UI y, en el evento abierto, el controlador escribirá una función para eliminar el botón ocultar. Selecciona el botón de cerrar usando la clase “ui-dialog-titlebar-close” y ocúltalo usando el método hide().
Ejemplo 2: Este ejemplo ilustra la eliminación del botón Cerrar del cuadro de diálogo.
HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog : demo dialog</title>
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css">
<script src=
"https://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"https://code.jquery.com/ui/1.11.2/jquery-ui.js">
</script>
<script>
$(function() {
$("#demoDialog").dialog({
open: function() {
$(".ui-dialog-titlebar-close").hide();
}
});
});
</script>
</head>
<body>
<h1> Dialog Widget without Close button</h1>
<div id="demoDialog" title="My Dialog Box">
<p>Welcome to GeeksforGeeks</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pulamolusaimohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA