jquery UI-Dialog: Wie initialisiere ich ohne Titelleiste?

Ist es möglich, einen jQuery UI-Dialog ohne Titelleiste zu öffnen?

Ich denke, dass die beste Lösung darin besteht, die Option zu verwenden dialogClass.

Ein Auszug aus jquery UI-Dokumenten:

während 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 dem CSS wie folgt erstellt:

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

zu einfach !! Aber ich brauchte einen Tag, um zu überlegen, warum meine vorherige Bohrmethode der ID-> Klasse nicht funktionierte. Wenn Sie die .dialog()Methode aufrufen, wird das von Ihnen transformierte Div zu einem Kind eines anderen Div (dem echten Dialog-Div) und möglicherweise zu einem „Bruder“ des titlebarDiv. Daher ist es sehr schwierig, das letztere ausgehend vom ersteren zu finden.

Ich habe einen Fix gefunden, um die Titelleiste dynamisch zu entfernen.

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

Dadurch werden alle Elemente mit der Klasse 'ui-dialog-titlebar' entfernt, nachdem das Dialogfeld gerendert wurde.

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

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

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

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

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

Schauen Sie sich den Dialog " Theming " an. Der obige Vorschlag nutzt die dialogClassOption, die auf dem Weg zu einer neuen Methode zu sein scheint .

Ich benutze dies 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 bei mir funktioniert:

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

Versuchen Sie es mit

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

Dadurch werden alle Dialogfeldtitel ausgeblendet

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

Tatsächlich gibt es noch eine andere Möglichkeit, dies widgetdirekt über den Dialog zu tun :

Sie können das Dialog-Widget also erhalten

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

und dann tun

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

titlebarnur innerhalb dieses Dialogfelds auszublenden

und in einer einzigen Codezeile (ich mag Verkettung):

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

Auf diese Weise müssen Sie dem Dialogfeld keine zusätzliche Klasse hinzufügen. Gehen Sie einfach direkt darauf ein. Funktioniert gut für mich.

Ich finde es effizienter und lesbarer, das offene Ereignis zu verwenden und die Titelleiste von dort auszublenden. Ich mag es nicht, seitenglobale Klassennamen zu suchen.

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

Einfach.

Sie können jquery verwenden, um die Titelleiste auszublenden, nachdem Sie dialogClass beim Initialisieren des Dialogfelds verwendet haben.

während init:

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

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

Mit dieser Methode müssen Sie Ihre CSS-Datei nicht ändern, und 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);

So können Sie jetzt einrichten, 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, und es wird nur die Titelleiste in diesem einen bestimmten Dialogfeld entfernt.

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

Das einzige, was ich beim Ausblenden der Dialog-Titelleiste entdeckt habe, ist, dass Bildschirmleser sie 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.

Ich habe es mit aus dem DOM entfernt $(selector).remove(). Jetzt sehen Bildschirmleser (und alle anderen) es nicht mehr, weil es nicht mehr existiert.

Versuche dies

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

dividdurch entsprechende ersetzenid

Dieses nächste Formular hat mir 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>

Ich denke, der sauberste Weg wäre, ein neues myDialog-Widget zu erstellen, das aus dem Dialog-Widget abzüglich des Titel-Barcodes besteht. Das Herausschneiden des Titel-Barcodes sieht unkompliziert aus.

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

Dies hat bei mir funktioniert, um die Titelleiste des Dialogfelds auszublenden:

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

So kann es gemacht werden.

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

Finden

Folgen

Wenn Sie titleBar nicht anzeigen möchten, stellen Sie einfach display ein: none wie im Folgenden.

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

Jetzt kommt die Schaltfläche zum Schließen. Sie können auch keine oder die Einstellungen festlegen

.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 Schaltfläche zum Schließen und keine Titelleiste für den Dialog hat. Sie können dies jedoch auch überwinden, indem Sie jquery verwenden und CSS über jquery hinzufügen und einstellen

Hier ist die Syntax dafür

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

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

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

Ich habe gerade festgestellt, dass ich die falsche Frage kommentiert habe. Meinem Namensvetter gerecht werden :(

Haben Sie eine Lösung aus jQuery UI-Dokumenten ausprobiert? https://api.jqueryui.com/dialog/#method-open

Wie es heißt, können Sie so tun ...

In CSS:

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

In JS:

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

Sie können die Leiste mit dem Schließsymbol mit den oben beschriebenen Techniken entfernen und dann selbst ein Schließsymbol hinzufügen.

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

// füge dieses div an das div an, das deinen Inhalt enthält

JS:

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

Gehen Sie zu Ihrer jquery-ui.js (in meinem Fall jquery-ui-1.10.3.custom.js) und suchen Sie nach this._createTitlebar (); und kommentiere es.

Jetzt wird jeder Ihrer Dialoge mit Überschriften angezeigt. Wenn Sie den Header anpassen möchten, gehen Sie einfach zu _createTitlebar (); und bearbeiten Sie den Code im Inneren.

durch