Menú principal

jQuery UI: Ocultar botón 'cerrar' en ventana de diálogo/modal

30 Jan
Published by fernando.villalobos in

Tags 

jQuery, jQueryUI

jQueryUI Dialog

Existen ocasiones en que deseamos mostrar contenido en una ventana modal pero necesitamos que el usuario interactúe con ella sin darle la posibilidad de cerrarla; para quienes usamos la librería jQuery UI la ventana de diálogo es una muy buena alternativa.


$(function() {
$( "#dialog" ).dialog();
});

El único detalle es que en la documentación no hay una forma inuitiva de ocultar el botón de cerrar (X). Para esto tenemos dos opciones: Ocultarlo vía CSS u ocultarlo por medio de Javascript.

Ocultar botón vía CSS

Al crear nuestra ventana modal, jQueryUI genera un elemento en la cabecera con clase 'ui-dialog-titlebar' y, dentro de él, un elemento con clase 'ui-dialog-titlebar-close'.

titlebar

Entonces, tenemos que definir una clase css que afecte a éste último elemento ocultándolo:

.hide-close .ui-dialog-titlebar-close { display: none }

Por último, tenemos que asociar esta clase a nuestra ventana modal al inicializarla por medio del parámetro dialogClass


$(function() {
$( "#dialog" ).dialog({ dialogClass: 'hide-close' });
});

Ocultar botón vía Javascript

Para ocultar el botón 'cerrar' de la ventana modal vía Javascript, debemos usar la función de callback 'Open', la cuál se manda a llamar cada que se abre la ventana de diálogo:


$(function() {
$( "#dialog" ).dialog({
open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog).hide(); }
});
});

Lo que hace este código es buscar el elemento con la clase ui-dialog-titlebar-close de la ventana recién creada y ocultarlo.

Espero que esto le sea de utilidad