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:
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.
quelle
Antworten:
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:
es wird
:) :)
quelle
$.fn.bootstrapBtn = $.fn.button.noConflict();
stackoverflow.com/a/23428433/402517Dies 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).ready
wird die Schaltfläche durch erneutes Deklarieren (ich habe es nachher deklariert ) erneut angezeigt (Antwort von https://stackoverflow.com/). a / 23428433/4660870 )quelle
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 Open
Ereignis beheben :quelle
Dies wird in 1.10 als fehlerhaft gemeldet
http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/
Ich habe die vorherige Version heruntergeladen und das X für die Schaltfläche zum Schließen wird wieder angezeigt.
quelle
Ich habe drei Korrekturen gefunden:
Dies:
hilft. Aber andere Knöpfe sehen schrecklich aus. Und jetzt haben wir keine Bootstrap-Buttons.
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
quelle
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
quelle
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:
quelle
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:
Dann habe ich in den Eigenschaften des Dialogfelds selbst eine Schaltfläche zum Schließen hinzugefügt: ...
Aus irgendeinem Grund musste ich beide Gegenstände anvisieren, aber es funktioniert!
quelle
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
Images
an derselben Stelle haben, die Sie habenjquery-ui.min.css
. Der Bilderordner muss die Bilder enthalten, die mit einem neuen Download der jquery-ui gefunden wurdenLange 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, derImages
im 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.quelle
Als Referenz habe ich auf diese Weise die offene Methode gemäß dem Vorschlag von @ john-macintyre erweitert:
quelle
}}
quelle
Wenn Sie den Dialog () innerhalb der js-Funktion aufrufen, können Sie die folgenden Konfliktcodes für die Bootstrap-Schaltfläche verwenden
quelle
Ein weiser Mann hat mir einmal geholfen.
jquery-ui.css
Erstellen Sie in dem Ordner, in dem Sie sich befinden, einen Ordner mit dem Namen "images" und kopieren Sie die folgenden Dateien in diesen Ordner:und das Schließsymbol wird angezeigt.
quelle
Fügen Sie einfach das fehlende hinzu:
quelle
Ich habe auch dieses Problem. Hier ist der Code, der für die Schaltfläche zum Schließen eingefügt wird:
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:
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:
Danach scheint das Problem mit den fehlenden Schaltflächen besser zu sein, obwohl ich nicht sicher bin, ob sie definitiv miteinander zusammenhängen.
quelle
Selbst wenn ich Bootstrap nach jquery-ui lade, konnte ich Folgendes beheben:
quelle