jQuery UI: Ocultar botón "cerrar" en ventana de diálogo-modal

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


Fuente
SHARE

MDS Mauricio Melo Granados

Hola. Soy desarrollador de software, CEO/Fundador de WebDesign Software, Colaborador en varios sitios web y proyectos, amante de los videojuegos y dice mi mamá que hasta guapo. xD

  • Facebook
  • Instagram
    Blogger Comment
    Facebook Comment

0 comentarios: