¿Cómo eliminar el botón de cierre en el cuadro de diálogo de la interfaz de usuario de jQuery?

¿Cómo quito el botón de cierre (el X en la esquina superior derecha) en un cuadro de diálogo creado por jQuery UI?

preguntado el 22 de mayo de 09 a las 04:05

Consulta la documentación, primer subtítulo: api.jqueryui.com/dialog -

@MikeCole La documentación es para 1.10. Creo que si desea ocultar el botón de cierre en cualquier versión inferior, deberá hacer algo como las respuestas a continuación. -

Utilice "ui-dialog-titlebar-close": "display: none;" cuando configuramos el diálogo modal jqueryui -

24 Respuestas

Descubrí que esto funcionó al final (tenga en cuenta que la tercera línea anula la función abierta que encuentra el botón y lo oculta):

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

Para ocultar el botón de cierre en todos los cuadros de diálogo, también puede utilizar el siguiente CSS:

.ui-dialog-titlebar-close {
    visibility: hidden;
}

Respondido 29 Jul 19, 16:07

$(".ui-dialog-titlebar-close", ui).hide(); para ocultar el botón para este diálogo solamente. - antonio serdyukov

Tampoco pude hacer que funcione desde el parámetro ui. Terminé usando: $ (". Ui-dialog-titlebar-close", $ (this) .parent ()). Hide (); - Nigel

@Anton Solo quiero señalar que solo especificar 'ui' no funciona. tienes que usar 'ui.dialog'. entonces la línea correcta sería $ (". ui-dialog-titlebar-close", ui.dialog) .hide (); - Bradley Mountford

@Bradley. ui no funcionó para mí, ui.dialog sí, pero se aplicó en cada instancia. Para aplicar ot working solo al que está definida la función de apertura, tuve que hacer esto: $ (". Ui-dialog-titlebar-close", this.parentNode) .hide (); - nabab

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

Aquí hay otra opción simplemente usando CSS que no anula todos los diálogos de la página.

El CSS

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

El HTML

<div class="selector" title="No close button">
    This is a test without a close button
</div>

El Javascript.

$( ".selector" ).dialog({ dialogClass: 'no-close' });

Ejemplo de trabajo

Respondido 07 Feb 14, 16:02

Me gusta este enfoque porque puedo usarlo junto con cosas como: .noTitleDlg .ui-dialog-titlebar {display: none} en CSS para construir la forma en que quiero que mi cuadro de diálogo aparezca y se comporte y luego simplemente configure el dialogClass en consecuencia. - A. Murray

solución muy limpia ... +1 para no involucrar la funcionalidad js adicional para eliminar el botón. - Bongos

Gran idea. Resulta útil apuntar a un cuadro de diálogo específico en situaciones en las que utiliza el mismo método de apertura para todos los cuadros de diálogo, y no es muy práctico cambiarlo para una instancia específica. - ZolaKt

Mi solución favorita. Estaba pensando que algo como esto sería el mejor enfoque. Gracias por tenerlo ya codificado aquí. Sobre la base de esto, me gusta usar esta variación que tomará el atributo de clase del div de contenido del diálogo, en el que puedo poner la clase "no-close": dialogClass : $("#my-dialog-id").attr("class"), - Sr. Lance E Sloan

Esta solución permite cerrar con escape, si desea evitar el cierre en escape use: $( ".selector" ).dialog({ dialogClass: 'no-close' , closeOnEscape: false,}); - Mladen Adamovic

la "mejor" respuesta no será buena para varios diálogos. aquí hay una mejor solución.

open: function(event, ui) { 
    //hide close button.
    $(this).parent().children().children('.ui-dialog-titlebar-close').hide();
},

respondido 25 mar '13, 05:03

Esto es más complicado de lo que necesitas. $(".ui-dialog-titlebar-close", $(this).parent()).hide(); - kevin panko

@KevinPanko su sugerencia funciona bien cuando usa el ejemplo proporcionado por el sitio de demostración de jquery ui con ASP.NET v2.0 en una página .aspx. jqueryui.com/demos/dialog/modal-form.html - Mateo Dally

.closest ('. ui-dialog') es mejor que asumir un padre. - tecnicismo

Puede usar CSS para ocultar el botón de cierre en lugar de JavaScript:

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

Si no desea afectar a todos los modales, puede usar una regla como

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

Y aplicar .hide-close-btn al nodo superior del diálogo

respondido 20 mar '19, 09:03

Esta respuesta fue fácil y sencilla. Sin embargo, solo se aplica si desea deshabilitar el botón para todos los cuadros de diálogo. - marca brittingham

@MarkBrittingham Puede simplemente aplicar una clase CSS personalizada a su modal y al selector, luego esto se aplicará a quien quiera - Juan mendes

Como se muestra en el oficial página y sugerido por David:

Crea un estilo:

.no-close .ui-dialog-titlebar-close {
    display: none;
}

Luego, puede simplemente agregar la clase de no cierre a cualquier diálogo para ocultar su botón de cierre:

$( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [{
        text: "OK",
        click: function() {
            $( this ).dialog( "close" );
        }
    }]
});

respondido 19 mar '13, 12:03

Creo que esto es mejor.

open: function(event, ui) {
  $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
}

respondido 26 nov., 10:19

El problema es que ocasionalmente también oculta el botón de cierre para otros diálogos. cómo prevenir eso. - Zaveed Abbasi

Incluso usando open: function (event, ui) {$ (this) .closest ('. Ui-dialog'). Find ('. Ui-dialog-titlebar-close'). Show (); } no funciona. - Zaveed Abbasi

Una vez que hayas llamado .dialog() en un elemento, puede ubicar el botón de cierre (y otras marcas de diálogo) en cualquier momento conveniente sin usar controladores de eventos:

$("#div2").dialog({                    // call .dialog method to create the dialog markup
    autoOpen: false
});
$("#div2").dialog("widget")            // get the dialog widget element
    .find(".ui-dialog-titlebar-close") // find the close button for this dialog
    .hide();                           // hide it

Metodo alternativo:

Dentro de los controladores de eventos de diálogo, this se refiere al elemento que se está "dialogando" y $(this).parent() hace referencia al contenedor de marcado de diálogo, por lo que:

$("#div3").dialog({
    open: function() {                         // open event handler
        $(this)                                // the element being dialogged
            .parent()                          // get the dialog widget element
            .find(".ui-dialog-titlebar-close") // find the close button for this dialog
            .hide();                           // hide it
    }
});

Para su información, el marcado de diálogo se ve así:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
    <!-- ^--- this is the dialog widget -->
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span class="ui-dialog-title" id="ui-dialog-title-dialog">Dialog title</span>
        <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
    </div>
    <div id="div2" style="height: 200px; min-height: 200px; width: auto;" class="ui-dialog-content ui-widget-content">
        <!-- ^--- this is the element upon which .dialog() was called -->
    </div>
</div>

Demos aquí

Respondido 04 ago 15, 11:08

¡¡Estupendo!! Esto permite mostrar / ocultar el botón de cierre después de que el diálogo ya se haya inicializado. - kRiZ

La respuesta de Robert MacLean no funcionó para mí.

Sin embargo, esto funciona para mí:

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

Respondido 12 Abr '12, 09:04

$("#div2").dialog({
   closeOnEscape: false,
   open: function(event, ui) { $('#div2').parent().find('a.ui-dialog-titlebar-close').hide();}
});

Respondido el 16 de Septiembre de 11 a las 17:09

Ninguno de los anteriores funciona. La solución que realmente funciona es:

$(function(){
  //this is your dialog:
  $('#mydiv').dialog({
    // Step 1. Add an extra class to our dialog to address the dialog directly. Make sure that this class is not used anywhere else:
    dialogClass: 'my-extra-class' 
  })
  // Step 2. Hide the close 'X' button on the dialog that you marked with your extra class
  $('.my-extra-class').find('.ui-dialog-titlebar-close').css('display','none');
  // Step 3. Enjoy your dialog without the 'X' link
})

Por favor, compruebe si funciona para usted.

Respondido 10 Feb 16, 18:02

La mejor manera de ocultar el botón es filtrarlo con su atributo de icono de datos:

$('#dialog-id [data-icon="delete"]').hide();

Respondido 02 Feb 11, 16:02

http://jsfiddle.net/marcosfromero/aWyNn/

$('#yourdiv').                 // Get your box ...
  dialog().                    // ... and turn it into dialog (autoOpen: false also works)
  prev('.ui-dialog-titlebar'). // Get title bar,...
  find('a').                   // ... then get the X close button ...
  hide();                      // ... and hide it

respondido 15 mar '11, 01:03

Para desactivar la clase, el código corto:

$(".ui-dialog-titlebar-close").hide();

puede ser usado.

Respondido 19 Oct 11, 13:10

El botón de cierre agregado por el widget de diálogo tiene la clase 'ui-dialog-titlebar-close', por lo que después de su llamada inicial a .dialog (), puede usar una declaración como esta para eliminar el botón de cierre nuevamente: Funciona ...

$( 'a.ui-dialog-titlebar-close' ).remove();

Respondido el 14 de diciembre de 12 a las 12:12

Capto el evento cercano del cuadro de diálogo. Este código luego elimina el <div> (#dhx_combo_list):

open: function(event, ui) { 
  //hide close button.
  $(this).parent().children().children('.ui-dialog-titlebar-close').click(function(){
    $("#dhx_combo_list").remove();
  });
},

respondido 25 mar '19, 18:03

$(".ui-button-icon-only").hide();

contestado el 05 de mayo de 14 a las 02:05

Debería poder usar CSS directo aquí en lugar de JS si solo está ocultando el ícono. Todas .hide() lo hace está establecido display:none en CSS, entonces $(".ui-button-icon-only").hide(); es funcionalmente equivalente a .ui-button-icon-only { display: none; }. - KyleMit

También puede eliminar su línea de encabezado:

<div data-role="header">...</div>

que elimina el botón de cierre.

respondido 21 nov., 12:05

document.querySelector('.ui-dialog-titlebar-close').style.display = 'none'

Respondido el 13 de enero de 15 a las 12:01

Manera fácil de lograr: (Haga esto en su Javascript)

$("selector").dialog({
    autoOpen: false,
    open: function(event, ui) {   // It'll hide Close button
        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
    },
    closeOnEscape: false,        // Do not close dialog on press Esc button
    show: {
        effect: "clip",
        duration: 500
    },
    hide: {
        effect: "blind",
        duration: 200
    },
    ....
});

Respondido el 13 de junio de 18 a las 12:06

Desde que descubrí que estaba haciendo esto en varios lugares de mi aplicación, lo envolví en un complemento:

(function ($) {
   $.fn.dialogNoClose = function () {
      return this.each(function () {
         // hide the close button and prevent ESC key from closing
         $(this).closest(".ui-dialog").find(".ui-dialog-titlebar-close").hide();
         $(this).dialog("option", "closeOnEscape", false);
      });
   };
})(jQuery)

Ejemplo de uso:

$("#dialog").dialog({ /* lots of options */ }).dialogNoClose();

Respondido el 21 de Septiembre de 17 a las 03:09

Soy fanático de las frases ingeniosas (¡donde funcionan!). Esto es lo que funciona para mí:

$("#dialog").siblings(".ui-dialog-titlebar").find(".ui-dialog-titlebar-close").hide();

Respondido el 15 de Septiembre de 18 a las 17:09

¿Qué tal usar esta línea CSS pura? Encuentro que esta es la solución más limpia para un diálogo con la identificación dada:

.ui-dialog[aria-describedby="IdValueOfDialog"] .ui-dialog-titlebar-close { display: none; }

Respondido 12 Abr '19, 09:04

Esto es para jQuery UI 1.12. Agregué la siguiente configuración para la opción 'clases'

        classes: {
            'ui-dialog-titlebar-close': 'hidden',
        },

toda la inicialización del diálogo se ve así:

ConfirmarSiNo(titulo, texto, idPadre, fnCerrar) {
    const DATA_RETORNO = 'retval';
    $('confirmar-si-no').dialog({
        title: titulo,
        modal: true,
        classes: {
            'ui-dialog-titlebar-close': 'hidden',
        },
        appendTo: `#${idPadre}`,
        open: function fnOpen() { $(this).text(texto); },
        close: function fnClose() {
            let eligioSi = $(this).data(DATA_RETORNO) == true;
            setTimeout(function () { fnCerrar(eligioSi); }, 30);
        },
        buttons: {
            'Si, por favor': function si() { $(this).data(DATA_RETORNO, true); $(this).dialog("close"); },
            'No, gracias': function no() { $(this).data(DATA_RETORNO, false); $(this).dialog("close"); }
        }
    });
}

Utilizo la siguiente llamada de script para mostrarlo:

ConfirmarSiNo('Titulo',
              '¿Desea actualizar?',
              idModalPadre,
              (eligioSi) => {
                            if (eligioSi) {
                                this.$tarifa.val(tarifa.tarifa);
                                this.__ActualizarTarifa(tarifa);
                            }
                        });

dentro del cuerpo Html tengo el siguiente div que contiene el diálogo:

<div class="modal" id="confirmar-si-no" title="" aria-labelledby="confirmacion-label">
    mensaje
</div>

el resultado final es:

enter image description here

función 'ConfirmarSiNo' se basa en 'A quien'respuesta en la publicación ¿Cómo implementar el cuadro de diálogo de "confirmación" en el cuadro de diálogo de la interfaz de usuario de Jquery?

Respondido el 08 de diciembre de 20 a las 20:12

Puede eliminar el botón de cierre con el siguiente código. También hay otras opciones con las que podrías luchar.

$('#dialog-modal').dialog({
    //To hide the Close 'X' button
    "closeX": false,
    //To disable closing the pop up on escape
    "closeOnEscape": false,
    //To allow background scrolling
    "allowScrolling": true
    })
//To remove the whole title bar
.siblings('.ui-dialog-titlebar').remove();

respondido 27 mar '17, 08:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.