jquery UI-Dialog: Wie initialisiere ich ohne Titelleiste?

254

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

Loony2nz
quelle

Antworten:

289

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.

Mizar
quelle
2
+1 Jonatans Lösung funktioniert nicht für bestimmte Dialoge. Deiner tut es.
Cetnar
1
Ich stimme Mizar zu. Dies ist die beste Lösung, da Sie mit dieser Lösung nur die Dialogfelder festlegen können, die nur die von Ihnen definierte Klasse enthalten.
Carlos Pinto
2
Der einzige Nachteil dieser Methode ist, dass Chrome eine vertikale Bildlaufleiste für ein solches Dialogfeld hinzufügt, wenn es als modal konfiguriert ist, da jQuery irgendwie anfängt, die Höhe der UI-Widget-Überlagerung falsch zu berechnen ... Ich habe nicht tiefer gegraben und habe es nicht getan Ich finde keine schnelle Lösung außer hacky {overflow: hidden}
dimsuz
1
dialogClass ist in jquery v 1.12 veraltet und wirkt sich nicht wie beabsichtigt auf das Dialogobjekt aus.
Mini-Kühlschrank
1
Die Option dialogClass wurde mithilfe der Eigenschaft ui-dialog zugunsten der Option classes veraltet.
Sandeep Saroha
96

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.

Loony2nz
quelle
3
... und die CSS-Option verhindert, dass sie zuvor angezeigt werden. Ich bin mir nicht sicher, ob Ihre Alternative einen Nutzen bringt. In Wirklichkeit wird Ihre Alternative das tun, was ich getan habe, und nur einen zusätzlichen Schritt hinzufügen. Die CSS-Route wird schneller.
Sampson
10
Nun, meine Option entfernt nur die Titelleiste für diesen einen Dialog. Wenn ich Ihre Option verwenden würde, würde ich die Titelleiste für alle meine Dialoge entfernen. Ich kann in Zukunft sehen, dass ich eine Titelleiste brauche.
Loony2nz
2
Sie fügen Ihr Element also in die CSS-Regel ein : #example .ui-dialog-titlebar.... Es wird so oder so funktionieren; Aber das Javascript wird das CSS irgendwann einstellen, daher sehe ich keinen Vorteil darin, es zunächst nicht in CSS zu tun. Es macht wirklich keinen großen Unterschied - was auch immer Sie am bequemsten sind :)
Sampson
2
Ist es nur ich oder hat #example keinen Gültigkeitsbereich über den Dialogtitel?
Rio
2
@ Reismehl-Cookies: Das .hide () muss nach .dialog () stehen, da .dialog () das Markup für den Dialog in die Seite einfügt. Vor diesem Aufruf hat die Seite noch keine Dialogelemente.
Jeremy Wiebe
62

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 .

Sampson
quelle
Ja, ich denke, das würde funktionieren, aber das ist eine globale Option. Ich habe mich gefragt, ob es einen Weg gibt, dies mit Optionen zu tun. Ich denke, ich kann vor dem Rendern etwas jquery'ness machen, um den Titel div zu entfernen, bevor er angezeigt wird.
Loony2nz
2
Ich glaube nicht, dass es eine Option gibt, es zu entfernen. Standardmäßig ist es die Schaltfläche zum Schließen, daher ist es in gewisser Weise fast schlecht gestaltet.
Sampson
3
Wenn Leute zu viel über CSS reden, sind sie
zauberhaft
Außerdem sollten Sie es wahrscheinlich nicht entfernen, da Sie den Dialog danach nicht mehr verschieben können. Wahrscheinlich ist es besser, keinen Text hinein zu setzen und ihn neu zu stylen, damit er dunkel und dünn ist
Bobobobo
Wenn Sie ein anderes Ereignis haben, das die Schließmethode des Dialogfelds auslöst, kann es Fälle geben, in denen Sie die Schaltfläche zum Schließen in der Titelleiste nicht benötigen.
Carlos Pinto
55

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();
Amirouche Douda
quelle
7
Noch besser: Entfernen Sie die Titelleiste, aber nicht die Schaltfläche zum Schließen. Behalten Sie seine Funktionalität. $(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();ist meiner Meinung nach die beste Antwort +1 für diese Codezeile
Jaylen
Oder Sie suchen einfach nach dem vorherigen Geschwister, nämlich der Titelleiste: .ui-dialog-titlebar: $("#myDialog").prev().hide()oder $("#myDialog").prev(".ui-dialog-titlebar").hide().
Andrew
Up Vote, weil ich zwei Divs habe und nur einen verstecken wollte.
Marcus Becker
15

Das hat bei mir funktioniert:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },
Koder
quelle
1
Dadurch werden die Überschriften in allen Dialogen ausgeblendet. Mein Vorschlag unten (nächste Antwort) wird dies nur für den aktuell geöffneten Dialog tun.
Zutat_15939
Schön ... Dies bedeutet, dass ich nicht jeden Dialog wegen der Basis-CSS-Klasse ausblenden muss ... bedeutet auch, dass ich meinen Dialog nicht separat einrichten und dann den Titel entfernen muss.
Gwasshoppa
8

Versuchen Sie es mit

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

Dadurch werden alle Dialogfeldtitel ausgeblendet

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

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.

odedbd
quelle
5

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.

Zutat_15939
quelle
2
Dies ist die Methode, mit der ich die Funktion create: verwendet habe, damit sie immer ausgeblendet ist, nicht nur, wenn der Dialog angezeigt wird. Ich habe es auch in .remove () anstelle von .hide () geändert, um sicherzustellen, dass es vollständig aus dem Dialogfeld entfernt wurde.
Chris Porter
4

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.

Arun Vasudevan Nair
quelle
1
Ja, dies war die Lösung von mizar - 6 Monate vor Ihrer.
Kirk Woll
Ich stimme zu, aber dann müssen Sie auch einen CSS-Eintrag hinzufügen, was die Lösung kompliziert. Mein Vorschlag behebt das Problem nur mit jQuery.
Arun Vasudevan Nair
4

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
});
Andrej Kaurin
quelle
4

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

Dies ist der einfachste Weg, und es wird nur die Titelleiste in diesem einen bestimmten Dialogfeld entfernt.

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

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.

user616258
quelle
2

Versuche dies

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

dividdurch entsprechende ersetzenid

abdulkaderjeelani
quelle
2

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>

jcromeros1987
quelle
1

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

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

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})
ProgrammingNinja
quelle
1
Dies funktioniert und ist hilfreich, um zu verstehen, dass dies möglich ist. Wenn Sie jedoch mehrere haben .dialogs()und nur 1 oder so diese Einstellungen benötigen, gibt es alternative Routen, als die Einstellungen global auf diese Weise anzuwenden.
Chef_Code
0

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

controlZ
quelle
0

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"
});
Олег Всильдеревьев
quelle
-1

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

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

user2575051
quelle
Solche Modifikationen verursachen schreckliche Upgrade-Schmerzen.
usr