javascript - ejemplo - jquery ui dialog example

¿Cómo eliminar jQuery-ui barra de título de diálogo?

Question

Estoy tratando de ocultar la barra de título del diálogo de jQuery-ui , pero mantengo el botón de cierre en la barra de título visible. He buscado muchas publicaciones en stackoverflow como esta . En cada publicación, la barra de título está oculta pero el espacio ocupado por la barra todavía está allí. Quiero eliminar ese espacio también, pero sin quitar el botón de cerrar.

¿Cómo puedo hacer esto?

Answer 1

Así es como se puede hacer.

Ir a la carpeta de temas -> base -> abrir jquery.ui.dialog.css

Encontrar

Seguimientos

si no desea mostrar titleBar, simplemente configure display: none como hice en lo siguiente.

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

Samilarly por el título también.

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

Ahora viene el botón de cerrar, también puede configurarlo o puede configurar su

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

Hice muchas búsquedas pero nada, entonces tuve esta idea en mi mente. Sin embargo, esto afectará a toda la aplicación para que no tenga un botón de cierre, barra de título para el diálogo, pero también puede superar esto usando jquery y agregando y configurando css a través de jquery.

aquí hay sintaxis para esto

$(".specificclass").css({display:normal})

Answer 2

Basado en esta respuesta :

Utilice la .dialog("widget") para ubicar el envoltorio div para el diálogo. El contenedor contiene todas las etiquetas utilizadas para el diálogo, incluidos el encabezado, la barra de título y el botón de cerrar; y el contenido del diálogo en sí mismo. Aquí hay una forma de invocar el método y ocultar la barra de título:

$("#id").dialog({
    autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();​

A continuación, puede usar CSS para eliminar el margen innecesario, el borde y el relleno. Por ejemplo:

.ui-dialog-titlebar {
    float: right;
    border: 0;
    padding: 0;
}
.ui-dialog-titlebar-close {
    top: 0;
    right: 0;
    margin: 0;
    z-index: 999;
}

Aquí hay una demostración basada en el código anterior más agrega los estilos necesarios usando jQuery.

Answer 3

De la forma en que lo veo, tienes 3 opciones.

1. Sí, elimine la barra de título por completo y agregue una personalizada que puede personalizar para que coincida con la predeterminada, utilizando la posición absoluta debe ser la clave.
2. Si tiene tiempo, amplíe (no sobrescriba) el método _create del cuadro de diálogo https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74 para hacer lo que necesitar
3. Trabaja con hackers CSS para mantener la barra de título allí con una altura de 0 para todos los elementos, pero con el botón de cerrar.

Cualquiera de los dos tiene sus contras y sus profesionales, recomendaría # 2 lo mejor que pueda, aquí hay información sobre cómo trabajar con widgets http://api.jqueryui.com/jQuery.widget/

Answer 4

Si desea eliminar la barra de titel y mantener el ícono de cerrar usando solo estilos, use los estilos a continuación. Reduce la barra de título al tamaño del ícono de cerrar y lo oculta detrás. ui-icons_6e6e6e_256x240.png lo he creado aligerando la imagen de ui-icons_222222_256x240.png que viene con jqueryui.

.ui-dialog .ui-dialog-titlebar.ui-widget-header{background: none; border: none; height: 20px; width: 20px; padding: 0px; position: static; float: right; margin: 0px 2px 0px 0px;}

.ui-dialog-titlebar.ui-widget-header .ui-dialog-title{display: none;}

.ui-dialog-titlebar.ui-widget-header .ui-button{background: none; border: 1px solid #CCCCCC;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin: 0px; position: static;}

.ui-dialog .dialog.ui-dialog-content{padding: 0px 10px 10px 10px;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{position: relative; margin-top: 0px; margin-left: 0px; top: 0px; left: 0px;}

.ui-dialog .ui-dialog-titlebar .ui-state-default .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_6e6e6e_256x240.png");}

.ui-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_222222_256x240.png");}