jQuery UI dialog sin una barra de título pero mantenga el button de cerrar

Quiero eliminar la barra de título del dialog jQuery. Pero quiero mantener el button cercano (cruzado) allí.

Encontré esta pregunta:

dialog de la interfaz de usuario de jquery: ¿cómo inicializar sin una barra de título?

Las respuestas allí explican cómo quitar la barra de título, pero si lo hago, también elimina el button de cerrar. También hay otros enlaces, pero todos hacen lo mismo. Simplemente ocultan toda la barra de título junto con el button de cerrar.

¿Hay alguna solución que oculte la barra de título manteniendo el button de cerrar?

Use esto para eliminar la barra de título del dialog jQuery y no el button de cerrar

$(function() { $( "#dialog" ).dialog(); $("#ui-dialog-title-dialog").hide(); $(".ui-dialog-titlebar").removeClass('ui-widget-header'); }); 

para una versión más reciente jquery UI> 1.10.3

 $("#dialog .ui-dialog-titlebar").css({ "background-color" : "transparent", "border" : "0px none" }); 

Esto también funciona

 $(function() { $( "#dialog" ).dialog(); $(".ui-dialog-titlebar").removeClass('ui-widget-header'); }); 

Puede quitar la barra con el ícono de cerrar con las técnicas descritas arriba y luego agregar un ícono de cerrar usted mismo.

CSS:

 .CloseButton { background: url('../icons/close-button.png'); width:15px; height:15px; border: 0px solid white; top:0; right:0; position:absolute; cursor: pointer; z-index:999; } 

HTML:

 var closeDiv = document.createElement("div"); closeDiv.className = "CloseButton"; 

// añada este div al div que contiene su contenido

JS:

  $(closeDiv).click(function () { $("yourDialogContent").dialog('close'); }); 

Creo que la solución más fácil y más robusta (las otras aquí no funcionan para 1.10.3 ya que suponen cosas que pueden cambiar) es establecer directamente el estilo de CSS que usted espera que tenga.

 $("#dialog .ui-dialog-titlebar").css({ "background-color" : "transparent", "border" : "0px none" }); 

Probé las otras soluciones aquí que sugirieron cambiar el atributo de background-color y eso no ayudó. La solución para mí fue cambiar el atributo de background a transparente.

.ui-dialog-titlebar { background: transparent; border: 0 none; }