¿Cómo elimino el botón de cerrar (el X en la esquina superior derecha) en un cuadro de diálogo creado por jQuery UI?
¿Cómo elimino el botón de cerrar (el X en la esquina superior derecha) en un cuadro de diálogo creado por jQuery UI?
He encontrado que esto funcionó al final (nótese la tercera línea que 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 Cerrar 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 que simplemente usa CSS que no abarca 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' });
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 Cerrar en lugar de JavaScript:
.ui-dialog-titlebar-close{
display: none;
}
Como se muestra en el oficial página y sugerido por David:
Crea un estilo:
.no-close .ui-dialog-titlebar-close {
display: none;
}
Luego, simplemente puede 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" );
}
}]
});
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() en un elemento, puede ubicar el botón Cerrar (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:
Controladores de eventos de diálogo internos, this se refiere al elemento que se "dialoga" y $(this).parent() se 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>
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();}
});