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

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

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.

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.

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.

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

Esto funcionó para mí:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

Intenta usar

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

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

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

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í.

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.

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.

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
});

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

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

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.

Prueba esto

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

reemplazar dividpor correspondienteid

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>

Creo que la forma más limpia de hacerlo sería crear un nuevo widget myDialog, que consiste en el widget de diálogo menos el código de barras del título. Excluir el código de barras del título parece sencillo.

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

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

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

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})

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 :(

¿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"
});

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');
     });

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