jQuery UI Dialog - fehlendes Schließsymbol

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.

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.

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

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

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.

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

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

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

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!

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.

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

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

}}

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>

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.

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>

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:

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

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