jquery UI-Dialog: Wie kann man ohne Titelleiste initialisieren?

Ich denke, dass die beste Lösung die Option dialogClass ist.

Ein Auszug aus Jquery-UI-Dokumenten:

während der Init: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

oder wenn du nach init willst. : 

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

Also habe ich einen Dialog mit der Option dialogClass = 'noTitleStuff' und der folgenden CSS erstellt:

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

zu einfach !! aber ich brauchte einen tag, um zu überlegen, warum meine bisherige Bohrmethode mit id-klasse nicht funktionierte. Wenn Sie die .dialog()-Methode aufrufen, wird das div, das Sie umwandeln, zu einem Kind eines anderen div (des echten Dialogs div) und möglicherweise zu einem "Bruder" der titlebar-div. Daher ist es sehr schwierig, das letztere ausgehend von der ersten zu finden.

Ich glaube, Sie können es mit CSS verstecken: 

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

Alternativ können Sie dies mit der Option dialogClass auf bestimmte Dialoge anwenden:

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

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

Schauen Sie sich " Theming " im Dialog an. Der obige Vorschlag macht von der Option dialogClass Gebrauch, die sich auf es ist ein Ausweg zugunsten einer neuen Methode zu befinden scheint.

Ich verwende das in meinen Projekten

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();

Das hat für mich funktioniert:

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

Versuchen Sie es mit

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

Dadurch werden alle Dialogtitel ausgeblendet

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

Tatsächlich gibt es noch eine andere Möglichkeit, den Dialog widget direkt zu verwenden:

Sie können das Dialog Widget also bekommen 

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

und dann tun

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

um nur die Variable titlebar in diesem Dialog auszublenden

und in einer einzigen Codezeile (ich mag Verketten):

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

Es ist nicht notwendig, eine zusätzliche Klasse auf diese Weise in den Dialog einzufügen. Arbeit gut für mich.

Ich finde es effizienter und lesbarer, das Ereignis open zu verwenden und die Titelleiste dort zu verbergen. Ich mag es nicht, globale Namen für die Suche nach Seitennamen zu verwenden.

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

Einfach.

Sie können jquery verwenden, um die Titelleiste nach der Verwendung von dialogClass beim Initialisieren des Dialogs auszublenden.

während der Init:

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

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

Wenn Sie diese Methode verwenden, müssen Sie Ihre CSS-Datei nicht ändern. Dies ist auch dynamisch.

Ich mag es, jQuery-Widgets zu überschreiben. 

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

Sie können also jetzt einstellen, ob Sie die Titelleiste anzeigen möchten oder nicht

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

Wenn Sie mehrere Dialoge haben, können Sie Folgendes verwenden:

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

Dies ist der einfachste Weg, dies zu tun, und es wird nur die Titelleiste in diesem einen bestimmten Dialog entfernt.

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

Beim Ausblenden der Dialog-Titelleiste habe ich festgestellt, dass Bildschirmlesegeräte die Anzeige auch dann aufheben und lesen, wenn sie nicht angezeigt werden. Wenn Sie bereits eine eigene Titelleiste hinzugefügt haben, werden beide gelesen, was zu Verwirrung führt. 

Was ich tat, war es mit $(selector).remove() aus dem DOM entfernt. Jetzt wird der Bildschirmleser (und alle anderen) nicht mehr angezeigt, weil er nicht mehr existiert.

Versuche dies

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

divid durch entsprechende id ersetzen

Dies funktionierte für mich, um die Titelleiste des Dialogfelds auszublenden: 

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

So kann es gemacht werden.

Gehen Sie zum Themes-Ordner -> Basis -> jquery.ui.dialog.css öffnen 

Finden 

Folgerungen 

wenn Sie titleBar nicht anzeigen möchten, setzen Sie einfach die Anzeige: Keine wie im Folgenden beschrieben. 

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

Samilarly auch für den Titel.

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

Nun kommt der Close-Button, Sie können ihn auch nicht einstellen oder Sie können ihn einstellen

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

}

Ich habe viel gesucht, aber nichts, dann kam mir diese Idee in den Sinn ... Dies hat jedoch zur Folge, dass die gesamte Anwendung keine Schließen-Schaltfläche und keine Titelleiste für Dialoge hat, aber Sie können dies ebenfalls überwinden, indem Sie Jquery verwenden und hinzufügen css über jquery einstellen

hier ist die Syntax dafür 

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

Ich denke, der sauberste Weg wäre, ein neues myDialog-Widget zu erstellen, das aus dem Dialog-Widget ohne den Titelstrichcode besteht. Das Ausschneiden des Titel-Strichcodes sieht einfach aus. 

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

Für mich wollte ich immer noch die anpassbaren Ecken nutzen, wollte einfach nicht die diagonalen Linien sehen. ich benutzte

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

Mir wurde gerade klar, dass ich die falsche Frage kommentierte. Meinem Namensvetter gerecht werden :(

Diese nächste Form hat das Problem behoben.

$('#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>