jQuery UI Dialog - fehlendes Schließsymbol

188

Ich verwende ein benutzerdefiniertes jQuery 1.10.3-Design. Ich habe jeden direkt von der Themenrolle heruntergeladen und absichtlich nichts geändert.

Ich erstelle ein Dialogfeld und erhalte ein leeres graues Quadrat, in dem sich das Schließsymbol befinden sollte: Screenshot des fehlenden Schließsymbols

Ich habe den auf meiner Seite generierten Code verglichen:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <spanid="ui-id-2" class="ui-dialog-title">Title</span>
    <button class="ui-dialog-titlebar-close"></button>
</div>

zu dem auf der Dialog Demo-Seite generierten Code :

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
        <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
        <span class="ui-button-text">close</span>
    </button>
</div>

BEARBEITEN: Die verschiedenen Teile des Codes werden von jQueryUI generiert , nicht von mir. Daher kann ich die span-Tags nicht einfach hinzufügen, ohne die jqueryui js-Datei zu bearbeiten. Dies scheint eine schlechte / unnötige Wahl zu sein, um normale Funktionalität zu erreichen.

Hier ist das verwendete Javascript, das diesen Teil des Codes generiert:

this.element.dialog({
    appendTo: "#summary_container",
    title: this.title(),
    closeText: "Close",
    width: this.width,
    position: {
        my: "center top",
        at: ("center top+"+(window.innerHeight*.1)),
        collision: "none"
    },
    modal: false,
    resizable: false,
    draggable: false,
    show: "fold",
    hide: "fold",
    close: function(){
        if(KOVM.areaSummary.isVisible()){
            KOVM.areaSummary.isVisible(false);
        }
    }
});

Ich bin ratlos und brauche Hilfe. Danke im Voraus.

Xion Dark
quelle
1
Haben Sie überprüft, ob die Bilddatei für das Symbol in Ihrem Dateisystem vorhanden ist?
Tiquelou
Ja, das Symbolbildblatt ist vorhanden und befindet sich an der richtigen Stelle.
Xion Dark

Antworten:

443

Ich bin eine Weile zu spät dran, aber ich werde dich umhauen, bereit?

Der Grund dafür ist, dass Sie Bootstrap in aufrufen, nachdem Sie jquery-ui in aufgerufen haben.

Tauschen Sie die beiden buchstäblich so aus, dass anstelle von:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

es wird

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

:) :)

Bearbeiten - 26/06/2015 - Dies stößt Monate später immer wieder auf Interesse, daher dachte ich, dass es eine Bearbeitung wert ist. Ich mag die noConflict-Lösung, die im Kommentar unter dieser Antwort angeboten und vom Benutzer Pretty Cool als separate Antwort erläutert wird, wirklich sehr. Wie einige Probleme mit dem Bootstrap-Tooltip gemeldet haben, wenn die Skripte ausgetauscht werden. Dieses Problem trat jedoch nicht auf, da ich die jquery-Benutzeroberfläche ohne Tooltip heruntergeladen habe, da ich sie aufgrund des Bootstraps nicht benötigte. Dieses Problem ist mir also nie aufgefallen.

Edit - 22/07/2015 - Nicht verwechseln jquery-uimit jquery! Für das JavaScript von Bootstrap muss jQuery zuvor geladen werden, es ist jedoch nicht auf jQuery-UI angewiesen. So jquery-ui.jskann nach geladen werden bootstrap.min.js, während jquery.jsimmer vor Bootstrap geladen werden muss.

David G.
quelle
7
Dies hat mein Problem behoben. Ich habe die Ressourcen in dieser Reihenfolge aufgenommen: 1) JQuery-Kern 2) Bootstrap 3) JQueryUI. Danke für Ihre Hilfe; besser spät als nie! PS - du hast mich umgehauen.
Xion Dark
6
Noch später ... Können Sie erklären, warum die Bootstrap-Bestellung etwas damit zu tun hat?
AndyC
4
Wenn Sie die Reihenfolge Bootstrap vor Jquery UI tauschen, funktionieren die Bootstrap-Tooltips nicht.
V
4
Dies ist zwar keine gute Lösung, aber ich habe sie positiv bewertet, da sie eine schnelle Möglichkeit bietet, um zu überprüfen, ob dies das Problem ist. Ich persönlich werde am Ende die Lösung von Raul Riveros verwenden, da das einfache Austauschen der beiden Skripte viele andere, größere Probleme verursacht. Übrigens, ich war ein bisschen verblüfft, als ich es sah.
Krowe
18
Wenn Sie die Reihenfolge von Bootstrap und jQuery UI nicht ändern möchten, können Sie auch die Schaltfläche reparieren: $.fn.bootstrapBtn = $.fn.button.noConflict(); stackoverflow.com/a/23428433/402517
l.poellabauer
45

Dies ist ein Kommentar zur Top-Antwort, aber ich fand, dass es eine eigene Antwort wert war, weil es mir half, das Problem zu beantworten.

Wenn Sie möchten, dass Bootstrap nach der JQuery-Benutzeroberfläche deklariert bleibt (ich habe es getan, weil ich den Bootstrap-Tooltip verwenden wollte), $(document).readywird die Schaltfläche durch erneutes Deklarieren (ich habe es nachher deklariert ) erneut angezeigt (Antwort von https://stackoverflow.com/). a / 23428433/4660870 )

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality
Ziemlich cool
quelle
Dies ist eine ziemlich raffinierte Art, Dinge zu tun, ohne die Anrufe stark zu stören. +1 für das gleiche.
Aalok Mishra
Button Klassen stören
Stefano Mtangoo
1
Das Problem bei dieser Lösung besteht darin, dass Code beschädigt wird, wenn Sie die Bootstrap-Schaltflächenfunktionalität verwenden möchten, z. B. Schaltfläche ('Laden'). Ersetzen Sie alle Verweise der Bootstrap-Funktionsaufrufe "button ()" durch "bootstrapBtn ()", um sicherzustellen, dass die vorhandene Bootstrap-Schaltflächenfunktion weiterhin funktioniert. (Ja, ich weiß, dass die Codekommentare dies implizieren, aber ich dachte, es lohnt sich, es explizit zu sagen.)
Kornél Regius
Beschwert sich Ihr Redakteur nicht über fehlende Semikolons?
R. Schreurs
22

Dies scheint ein Fehler in der Art und Weise zu sein, wie jQuery ausgeliefert wird. Sie können es manuell mit einigen Dom-Manipulationen am Dialog OpenEreignis beheben :

$("#selector").dialog({
    open: function() {
        $(this).closest(".ui-dialog")
        .find(".ui-dialog-titlebar-close")
        .removeClass("ui-dialog-titlebar-close")
        .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
    }
});
KyleMit
quelle
8
Zu Ihrer Information, für zukünftige Leser können Sie ui.dialog (Link) erweitern, damit Sie diese offene Funktionalität nicht bei jedem Aufruf duplizieren müssen.
John MacIntyre
2
Das hat ziemlich gut funktioniert. Das X war allerdings etwas weiter links als normal ... ich weiß nicht genau warum.
ashlar64
Tolle Lösung! In meinem Fall war die removeClass (...) jedoch nicht erforderlich und verursachte die falsch platzierte X-Schaltfläche links im Dialogfenster. Die Verkettung der html () -Methode mit der find () -Methode hat den Job erledigt. Danke dir.
Aamir
16

Dies wird in 1.10 als fehlerhaft gemeldet

http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/

phillip am 29. Januar 2013 um 7:36 Uhr sagte: In den CDN-Versionen fehlt die Schaltfläche zum Schließen des Dialogfelds. Es gibt nur das Button-Tag, das Span-UI-Symbol ist falsch.

Ich habe die vorherige Version heruntergeladen und das X für die Schaltfläche zum Schließen wird wieder angezeigt.

Robert
quelle
Ich benutze 1.10.3, aber zumindest fühle ich mich jetzt weniger verrückt. Ich habe beschlossen, es vorerst einfach zu ignorieren. Vielen Dank.
Xion Dark
Ich kann bestätigen, dass dies immer noch ein Problem in 1.10.3
Frug
Immer noch gleich in 1.10.4
Dbloch
Gleiches Problem in 1.12.1
TetraDev
15

Ich habe drei Korrekturen gefunden:

  1. Sie können einfach zuerst Bootsrap laden. Und sie laden jquery-ui. Aber es ist keine gute Idee. Weil Sie Fehler in der Konsole sehen.
  2. Dies:

    var bootstrapButton = $.fn.button.noConflict();
    $.fn.bootstrapBtn = bootstrapButton;

    hilft. Aber andere Knöpfe sehen schrecklich aus. Und jetzt haben wir keine Bootstrap-Buttons.

  3. Ich möchte nur Bootsrap-Stile verwenden und außerdem eine Schaltfläche zum Schließen mit einem Symbol haben. Ich habe folgendes getan:

    Wie nah die Schaltfläche nach dem Fix aussieht

    .ui-dialog-titlebar-close {
        padding:0 !important;
    }
    
    .ui-dialog-titlebar-close:after {
        content: '';
        width: 20px;
        height: 20px;
        display: inline-block;
        /* Change path to image*/
        background-image: url(themes/base/images/ui-icons_777777_256x240.png);
        background-position: -96px -128px;
        background-repeat: no-repeat;
    }
Yauheni Charniauski
quelle
Hervorragend! Wenn Sie die Bilddatei oder ein bestimmtes Thema nicht installiert haben, können Sie sie hier herunterladen : jqueryui.com/themeroller . Laden Sie das Thema herunter und wählen Sie die gewünschten Komponenten aus (in diesem Fall Dialog). Laden Sie dann das Thema oder den Bildordner herunter, extrahieren Sie es, öffnen Sie es und kopieren Sie die Bilddatei, die Ihrem Thema entspricht, in Ihr Projekt. Ändern Sie dann die Referenz in der von Yauheni in seiner Antwort bereitgestellten CSS.
Exel Gamboa
Ihr Punkt 3 hat das Problem für mich gelöst. Ich muss nur geringfügige Anpassungen an Breite, Höhe und Hintergrundposition vornehmen, damit die Schaltfläche so aussieht, wie ich es wollte. Danke dir.
Vimalan Jaya Ganesh
9

Ich hatte genau das gleiche Problem. Vielleicht haben Sie dies bereits überprüft, es aber gelöst, indem Sie den Ordner "images" am selben Speicherort wie jquery-ui.css abgelegt haben

Juan Hernández
quelle
3
Eigentlich ist dies die Antwort, die das Problem für mich gelöst oder zumindest geklärt hat. Ich hatte eine Testseite, die auf die Online- Kopie (dh code.jquery.com / ... ) von jquery-ui.css verwies, und in diesem Fall wurde das "X" angezeigt. Auf meiner eigentlichen Projektseite, auf der sich die CSS-Datei in einem lokalen CSS-Ordner befand, wurde das "X" jedoch nicht angezeigt. Durch Kopieren des Ordners "images" in meinen lokalen CSS-Ordner neben meiner CSS-Datei wurde das Problem behoben.
Dave Marley
5

Ich hatte das gleiche Problem und nachdem ich alle obigen Vorschläge gelesen und ausprobiert hatte, habe ich versucht, dieses Bild (das Sie hier finden ) manuell im CSS zu ersetzen, nachdem ich es heruntergeladen und im Bilderordner meiner App und von voilá gespeichert habe. Problem gelöst!

Hier ist das CSS:

.ui-state-default .ui-icon {
        background-image: url("../img/ui-icons_888888_256x240.png");
}
Raul Rivero
quelle
3

Ich verwende jQuery UI 1.8.17 und hatte das gleiche Problem. Außerdem wurden zusätzliche CSS-Stylesheets auf die Elemente auf der Seite angewendet, einschließlich der Farbe der Titelleiste. Um andere Probleme zu vermeiden, habe ich die genauen UI-Elemente mithilfe des folgenden Codes ausgewählt:

$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();    
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();

Dann habe ich in den Eigenschaften des Dialogfelds selbst eine Schaltfläche zum Schließen hinzugefügt: ...

modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...

Aus irgendeinem Grund musste ich beide Gegenstände anvisieren, aber es funktioniert!

James Drinkard
quelle
3

Ich weiß, dass diese Frage alt ist, aber ich hatte gerade dieses Problem mit jquery-ui v1.12.0.

Kurze Antwort Stellen Sie sicher, dass Sie einen Ordner Imagesan derselben Stelle haben, die Sie haben jquery-ui.min.css. Der Bilderordner muss die Bilder enthalten, die mit einem neuen Download der jquery-ui gefunden wurden

Lange Antwort

Mein Problem ist, dass ich gulp verwende, um alle meine CSS-Dateien in einer einzigen Datei zusammenzuführen. Wenn ich das mache, ändere ich den Ort des jquery-ui.min.css. Der CSS-Code für das Dialogfeld erwartet einen Ordner, der Imagesim selben Verzeichnis aufgerufen wird, und in diesem Ordner werden Standardsymbole erwartet. Da gulp die Bilder nicht in das neue Ziel kopierte, wurde das x-Symbol nicht angezeigt.

Junior
quelle
1

Als Referenz habe ich auf diese Weise die offene Methode gemäß dem Vorschlag von @ john-macintyre erweitert:

$.widget( "ui.dialog", $.ui.dialog, {
	open: function() {
		$(this.uiDialogTitlebarClose)
			.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>");
		// Invoke the parent widget's open().
		return this._super();
	}
});

Dekanimcox
quelle
1
  just add in css
 .ui-icon-closethick{
 margin-top: -8px!important;
margin-left: -8px!important;

}}

Shashidhar
quelle
1

Wenn Sie den Dialog () innerhalb der js-Funktion aufrufen, können Sie die folgenden Konfliktcodes für die Bootstrap-Schaltfläche verwenden

 <div class="row">
   <div class="col-md-12">
       <input type="button" onclick="ShowDialog()"  value="Open Dialog" id="btnDialog"/>
   </div>
</div>

<div style="display:none;" id="divMessage">
    <table class="table table-bordered">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Giri</td>
            <td>Prasad</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Bala</td>
            <td>Kumar</td>
            <td>24</td>
        </tr>
    </table> 
</div>



<script type="text/javascript">
    function ShowDialog()
    {
        if (typeof $.fn.bootstrapBtn =='undefined') {
            $.fn.bootstrapBtn = $.fn.button.noConflict();
        }

        $('#divMessage').dialog({
            title:'Employee Info',
            modal:true
        });
    }
    </script>
giri-webdev
quelle
1

Ein weiser Mann hat mir einmal geholfen.

jquery-ui.cssErstellen Sie in dem Ordner, in dem Sie sich befinden, einen Ordner mit dem Namen "images" und kopieren Sie die folgenden Dateien in diesen Ordner:

ui-icons_444444_256x240.png

ui-icons_555555_256x240.png

ui-icons_777620_256x240.png

ui-icons_777777_256x240.png

ui-icons_cc0000_256x240.png

ui-icons_ffffff_256x240.png

und das Schließsymbol wird angezeigt.

Boris Prashchurovich
quelle
0

Fügen Sie einfach das fehlende hinzu:

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
Reichlich Lee
quelle
3
Ich kann nicht Ich erstelle diesen Teil des HTML nicht, jquery schon. Ich habe meiner Frage weitere Informationen hinzugefügt, um diesen Punkt zu verdeutlichen.
Xion Dark
0

Ich habe auch dieses Problem. Hier ist der Code, der für die Schaltfläche zum Schließen eingefügt wird:

Vom Webentwickler, der den von jquery erstellten Code anzeigt

Wenn ich den style = "display: none:" auf der Schaltfläche ausschalte, wird die Schaltfläche zum Schließen angezeigt. Also aus irgendeinem Grund diese Anzeige: keine; wird eingestellt, und ich sehe nicht, wie ich das kontrollieren soll. Eine andere Möglichkeit, dies zu beheben, besteht darin, die Anzeige einfach zu überschreiben: keine. Ich sehe aber nicht, wie ich das machen soll.

Ich stelle fest, dass die von KyleMit gepostete Antwort funktioniert, aber einen anders aussehenden X-Button erzeugt.

Ich stelle außerdem fest, dass dieses Problem nicht alle Dialoge auf meinen Seiten betrifft, sondern nur einige davon. Einige Dialoge funktionieren wie erwartet. andere haben keinen Titel (dh der Bereich, der den Titel enthält, ist leer), während die Schaltfläche zum Schließen vorhanden ist.

Ich denke, dass etwas ernsthaft falsch ist und es möglicherweise nicht die Zeit für 1.10.x ist.

Nach weiteren Arbeiten stellte ich jedoch fest, dass die Titel in einigen Fällen nicht richtig eingestellt wurden, und nachdem dies behoben wurde, wurde die Schaltfläche zum Schließen von X wieder so angezeigt, wie sie sein sollte.

Ich habe die Titel so eingestellt:

('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);

Diese ID ist in meinem Code nicht vorhanden, wird aber anscheinend von jquery aus ac-popup und ui-dialog-title erstellt. Eine Art Kludge. Aber wie gesagt das funktioniert nicht mehr und ich muss stattdessen folgendes verwenden:

$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);

Danach scheint das Problem mit den fehlenden Schaltflächen besser zu sein, obwohl ich nicht sicher bin, ob sie definitiv miteinander zusammenhängen.

Jeffrey Simon
quelle
0

Selbst wenn ich Bootstrap nach jquery-ui lade, konnte ich Folgendes beheben:

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}
Idiglove
quelle