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

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

He encontrado que esto funcionó al final (tenga en cuenta que la tercera línea anula la función de abrir 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 usar el siguiente CSS:

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

Aquí hay otra opción simplemente usando CSS que no anula todos los diálogos en 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

la "mejor" respuesta no será buena para múltiples diálogos. Aquí hay una mejor solución.

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

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-btnal nodo superior del diálogo

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

Crea un estilo:

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

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

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

Creo que esto es mejor.

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

Una vez que haya llamado .dialog()a 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, se thisrefiere al elemento que se está "dialogando" y se $(this).parent()refiere al contenedor de marcado de diálogo, entonces:

$("#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
    }
});

FYI, 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í

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

Sin embargo, esto funciona para mí:

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

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

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.

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

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

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

Para desactivar la clase, el código corto:

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

puede ser usado.

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 nuevamente el botón de cerrar: funciona ...

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

Capté 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();
  });
},

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

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

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

que elimina el botón de cerrar.

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

Manera fácil de lograr: (Haz esto en tu 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
    },
    ....
});

Como 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();

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

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

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

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

Puede eliminar el botón de cierre con el código a continuación. También hay otras opciones con las que podría luchar útil.

$('#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();