cuadro de diálogo jquery UI: ¿cómo inicializar sin una barra de título?

254

¿Es posible abrir un cuadro de diálogo de jQuery UI sin una barra de título?

Loony2nz
fuente

Respuestas:

289

Creo que la mejor solución es usar la opción dialogClass.

Un extracto de jquery UI docs:

durante init: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

o si quieres después de init. :

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

Así que creé un diálogo con la opción dialogClass = 'noTitleStuff' y el CSS así:

.noTitleStuff .ui-dialog-titlebar {display:none}

demasiado simple !! pero me tomé 1 día para pensar por qué mi método de perforación id-> class anterior no funcionaba. De hecho, cuando llama al .dialog()método el div que transforma se convierte en hijo de otro div (el div de diálogo real) y posiblemente en un 'hermano' del titlebardiv, por lo que es muy difícil tratar de encontrar el último comenzando por el anterior.

mizar
fuente
2
La solución de +1 Jonatan no funciona para un diálogo particular. El tuyo lo hace.
cetnar
1
Estoy de acuerdo con mizar. Esta es la mejor solución porque le permite ser específico para los cuadros de diálogo que solo tienen la clase que definió.
Carlos Pinto
2
El único inconveniente de este método es que Chrome agrega una barra de desplazamiento vertical para dicho cuadro de diálogo cuando se configura como modal, porque de alguna manera jQuery comienza a calcular incorrectamente su altura de superposición de widgets ui ... No profundicé, y no lo hice no encuentre una solución rápida aparte de hacky {overflow: hidden}
dimsuz
1
dialogClass está en desuso en jquery v 1.12 y no afecta al objeto de diálogo según lo previsto.
Mini nevera
1
La opción dialogClass ha quedado en desuso a favor de la opción de clases, utilizando la propiedad ui-dialog.
Sandeep Saroha
96

Descubrí una solución para eliminar dinámicamente la barra de título.

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

Esto eliminará todos los elementos con la clase 'ui-dialog-titlebar' después de que se muestre el cuadro de diálogo.

Loony2nz
fuente
3
... y la opción css elimina cualquier posibilidad de que aparezcan antes. No estoy seguro de ver algún beneficio en su alternativa. En realidad, su alternativa va a hacer lo que hice, solo agregando un paso adicional. Ir a la ruta CSS será más rápido.
Sampson
10
Bueno, mi opción solo eliminará la barra de título para este cuadro de diálogo. Si usara su opción, eliminaría la barra de título de todos mis cuadros de diálogo. Puedo ver en el futuro que necesitaré una barra de título.
Loony2nz
2
Por lo que incluye su elemento dentro de la CSS en reglas: #example .ui-dialog-titlebar.... Funcionará de cualquier manera; pero el Javascript finalmente configurará el CSS, por lo que no veo el beneficio de no hacerlo en CSS para empezar. Realmente no hace mucha diferencia, sea lo que sea con lo que se sienta más cómodo :)
Sampson
2
¿Soy solo yo o #ejemplo no tiene alcance sobre el título del diálogo?
Rio
2
Cookies de harina de arroz: el .hide () tiene que venir después de .dialog () porque .dialog () es lo que inyecta el marcado para el diálogo en la página. Antes de esa llamada, la página todavía no tiene elementos de diálogo.
Jeremy Wiebe
62

Creo que puedes ocultarlo con CSS:

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

Alternativamente, puede aplicar esto a cuadros de diálogo específicos con la dialogClassopción:

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});
.no-titlebar .ui-dialog-titlebar {
    display: none;
}

Echa un vistazo a " Theming " el cuadro de diálogo. La sugerencia anterior hace uso de la dialogClassopción, que parece estar en camino a favor de un nuevo método.

Sampson
fuente
Sí, supongo que funcionaría, pero esa es una opción global. Me preguntaba si había una manera de hacerlo con opciones. Supongo que puedo hacer un poco de representación previa de jquery'ness para eliminar el título div antes de que se muestre.
Loony2nz
2
No. No creo que haya una opción para eliminarlo. Por defecto, es el botón de cierre, por lo que, en cierto sentido, es casi un mal diseño.
Sampson
3
Cuando la gente habla de css demasiado, de que escriban-divertido, ¿no es así
bobobobo
Además, probablemente no debería eliminarlo, ya que no puede mover el diálogo más después de eso. Probablemente sea mejor no poner texto y rediseñarlo para que quede oscuro y delgado
bobobobo
Si tiene algún otro evento que active el método de cierre del cuadro de diálogo, puede haber casos en los que no necesite el botón de cierre en la barra de título.
Carlos Pinto
55

Lo uso en mis proyectos

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();
Amirouche Douda
fuente
77
Aún mejor: elimine la barra de título pero no el botón de cierre. Mantener su funcionalidad. $(document).ready(function() { $('#video').click(function(){ $( "#dialog" ).dialog().siblings('.ui-dialog-titlebar').removeClass('ui-widget-header'); }); });
Adrian P.
$("#myDialog").dialog('open').siblings('.ui-dialog-titlebar').remove();es la mejor respuesta en mi opinión +1 para esta línea de código
Jaylen
O simplemente puede buscar el hermano anterior, que es la barra de título: .ui-dialog-titlebar: $("#myDialog").prev().hide()o $("#myDialog").prev(".ui-dialog-titlebar").hide().
Andrew
Voto porque tengo dos divs y quería ocultar solo uno.
Marcus Becker
15

Esto funcionó para mí:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },
Koder
fuente
1
Esto ocultará los encabezados en todos los cuadros de diálogo. Mi sugerencia a continuación (próxima respuesta) lo hará solo para el diálogo de apertura actual.
ingrediente_15939
Agradable ... Esto significa que no tengo que ocultar todos los cuadros de diálogo debido a la clase css base ... también significa que no tengo que configurar mi cuadro de diálogo por separado y luego eliminar el título.
Gwasshoppa
8

Intenta usar

$("#mydialog").closest(".ui-dialog-titlebar").hide();

Esto ocultará todos los títulos de los cuadros de diálogo.

$(".ui-dialog-titlebar").hide();
Firas Abd Alrahman
fuente
7

En realidad, hay otra forma de hacerlo, usando el diálogo widgetdirectamente:

Puede obtener el widget de diálogo de esta manera

$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');

y luego hacer

$dlgWidget.find(".ui-dialog-titlebar").hide();

para ocultar titlebarsolo dentro de ese diálogo

y en una sola línea de código (me gusta encadenar):

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

No es necesario agregar una clase adicional al cuadro de diálogo de esta manera, solo ve directamente. Funciona bien para mí.

odedbd
fuente
5

Me resulta más eficiente y más legible utilizar el evento abierto y ocultar la barra de título desde allí. No me gusta usar búsquedas de nombre de clase de página global.

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

Sencillo.

ingrediente_15939
fuente
2
Este es el método que utilicé pero utilicé la función create: para que siempre esté oculto, no solo cuando se muestra el diálogo. También lo cambié a .remove () en lugar de .hide () para asegurarme de que desapareció por completo del cuadro de diálogo.
Chris Porter
4

Puede usar jquery para ocultar la barra de título después de usar dialogClass al inicializar el diálogo.

durante init:

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

Al usar este método, no necesita cambiar su archivo css, y esto también es dinámico.

Arun Vasudevan Nair
fuente
1
Sí, esta fue la solución de mizar, publicada 6 meses antes que la tuya.
Kirk Woll
Estoy de acuerdo, pero luego tendrá que agregar una entrada CSS que complica la solución. Mi sugerencia resuelve el problema usando solo jQuery.
Arun Vasudevan Nair
4

Me gusta anular los widgets jQuery.

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

Así que ahora puede configurar si desea mostrar la barra de título o no

   $('#mydialog').dialog({
      headerVisible: false // or true
});
Andrej Kaurin
fuente
4

Si tiene múltiples diálogos, puede usar esto:

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });
m4dd
fuente
3

Esta es la forma más fácil de hacerlo y solo eliminará la barra de título en ese cuadro de diálogo específico;

$('.dialog_selector').find('.ui-dialog-titlebar').hide();
pdubbb1
fuente
2

Lo único que descubrí al ocultar la barra de título de Diálogo es que, incluso si la visualización no es ninguna, los lectores de pantalla aún la toman y la leen. Si ya agregó su propia barra de título, leerá ambos, causando confusión.

Lo que hice fue eliminarlo del DOM usando $(selector).remove(). Ahora los lectores de pantalla (y todos los demás) no lo verán porque ya no existe.

usuario616258
fuente
2

Prueba esto

$("#ui-dialog-title-divid").parent().hide();

reemplazar dividpor correspondienteid

abdulkaderjeelani
fuente
2

Esta siguiente forma me solucionó el problema.

$('#btnShow').click(function() {
  $("#basicModal").dialog({
    modal: true,
    height: 300,
    width: 400,
    create: function() {
      $(".ui-dialog").find(".ui-dialog-titlebar").css({
        'background-image': 'none',
        'background-color': 'white',
        'border': 'none'
      });
    }
  });
});
#basicModal {
  display: none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="basicModal">
  Here your HTML content
</div>
<button id="btnShow">Show me!</button>

jcromeros1987
fuente
1

Esto funcionó para mí para ocultar la barra de título del cuadro de diálogo:

$(".ui-dialog-titlebar" ).css("display", "none" );
usuario1712742
fuente
1

Así es como se puede hacer.

Vaya a la carpeta de temas -> base -> abra jquery.ui.dialog.css

Encontrar

Seguimientos

si no desea mostrar titleBar, simplemente configure display: none como lo 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 Cerrar, también puede configurarlo como ninguno 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 mucha búsqueda pero nada, entonces tuve esta idea en mi mente. Sin embargo, esto afectará a toda la aplicación para que no tenga el botón de cierre, la 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})
ProgrammingNinja
fuente
1
Esto funciona y es útil para entender que esto se puede hacer, pero si tiene múltiples .dialogs()y solo 1 o más necesita estas configuraciones, entonces hay rutas alternativas que aplicar las configuraciones globalmente de esta manera.
Chef_Code
0

Para mí, todavía quería usar las esquinas redimensionables, simplemente no quería ver las líneas diagonales. solía

$(".ui-resizable-handle").css("opacity","0");

Me acabo de dar cuenta de que estaba comentando la pregunta equivocada. Haciendo honor a mi tocayo :(

controlZ
fuente
0

¿Has probado la solución de jQuery UI docs? https://api.jqueryui.com/dialog/#method-open

Como dice que puedes hacer así ...

En CSS:

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

En JS:

$( "#dialog" ).dialog({
  dialogClass: "no-titlebar"
});
Олег Всильдеревьев
fuente
-1

Puede eliminar la barra con el icono de cierre con las técnicas descritas anteriormente y luego agregar un icono de cierre 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";

// agrega este div al div que contiene tu contenido

JS:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });
Jacob
fuente
-1

vaya a su jquery-ui.js (en mi caso jquery-ui-1.10.3.custom.js) y busque this._createTitlebar (); y comentarlo

ahora cualquiera de los suyos aparecerá con cuadros de diálogo. Si desea personalizar el encabezado simplemente vaya a _createTitlebar (); y edite el código adentro.

por

usuario2575051
fuente
Hacer modificaciones como esa causa un terrible dolor de actualización.
usr