it-swarm.com.de

jQuery UI-Dialog - Schließen-Symbol fehlt

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

Ich erstelle ein Dialogfeld und erhalte ein leeres graues Quadrat, in dem das schließende Symbol angezeigt werden sollte: Screen shot of missing close icon

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 ich. Ich kann also nicht einfach die span-Tags hinzufügen, ohne die jqueryui-js-Datei zu bearbeiten .

Hier ist das 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.

168
Xion Dark

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

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

Tauschen Sie die beiden wörtlich 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>

:)

Edit - 26/06/2015 - das zieht Monate später Interesse an, so dass ich dachte, es wäre eine Bearbeitung wert. Ich mag wirklich den noConflict Lösung im Kommentar unter dieser Antwort angeboten und geklärt von user Pretty Cool als separate Antwort. Da einige Probleme gemeldet haben mit dem Bootstrap-Tooltip, wenn die Skripts ausgetauscht werden. Ich habe nicht. Dieses Problem tritt jedoch auf, weil ich die Jquery-Benutzeroberfläche ohne .__ heruntergeladen habe. der Tooltip, da ich ihn nicht gebraucht habe, weil bootstrap. Also diese Ausgabe niemals kam für mich auf.

Bearbeiten - 22/07/2015 - Verwechseln Sie jquery-ui nicht mit jquery! Während Bootstraps JavaScript erfordert, dass jQuery zuvor geladen wurde. Es ist nicht auf die jQuery-UI angewiesen. So kann jquery-ui.js nach bootstrap.min.js geladen werden, während jquery.js vor Bootstrap immer geladen werden muss.

400
David G

Dies ist ein Kommentar zu der obersten Antwort, aber ich war der Meinung, dass es seine eigene Antwort wert war, weil sie mir half, das Problem zu lösen.

Wenn Sie möchten, dass Bootstrap nach der JQuery-Benutzeroberfläche deklariert wird (ich habe es gemacht, weil ich den Bootstrap-Tooltip verwenden wollte), wird Folgendes durch die Deklaration (ich habe es nach $(document).ready erklärt) die Schaltfläche erneut anzeigen lassen (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
39
Pretty Cool

Dies scheint ein Fehler in der Art und Weise zu sein, wie jQuery ausgeliefert wird. Sie können es manuell korrigieren, indem Sie einige Dom-Manipulationen am Ereignis " Dialog Open " vornehmen:

$("#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>");
    }
});
20
KyleMit

Dies wird in 1.10 als gebrochen gemeldet

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

phillip hat am 29. Januar 2013 um 7:36 Uhr gesagt: In den CDN-Versionen wird der Dialog Schließen Schaltfläche fehlt. Es gibt nur den Button-Tag, den Span ui-icon ist missong.

Ich habe die vorherige Version heruntergeladen und das X für den Schließen-Button wird wieder angezeigt.

15
Robert

Ich habe drei Korrekturen gefunden:

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

    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 auch einen Close-Button mit einem Symbol haben. Ich habe folgendes gemacht:

    Wie sieht die Schließen-Schaltfläche nach dem Fix aus

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

Ich hatte genau das gleiche Problem. Vielleicht haben Sie dies bereits überprüft, aber es wurde gelöst, indem Sie den Ordner "images" an derselben Stelle wie die Datei jquery-ui.css platzieren

8
Juan Hernández

Ich blieb beim gleichen Problem hängen und nachdem ich alle Vorschläge gelesen und ausprobiert hatte, versuchte ich, dieses Bild (das Sie hier hier finden) manuell in CSS zu ersetzen, nachdem Sie es heruntergeladen und im Bilderordner auf meinem gespeichert haben app und voilá, problem gelöst!

hier ist das CSS:

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

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

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

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

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

Aus irgendeinem Grund musste ich beide Elemente anvisieren, aber es funktioniert!

2
James Drinkard

Als Referenz habe ich 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();
	}
});

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

}

1
Shashidhar

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

Kurze Antwort Vergewissern Sie sich, dass Sie einen Ordner mit dem Namen Images an derselben Stelle haben, an der jquery-ui.min.css liegt. Der Bilderordner muss die gefundenen Bilder enthalten, und zwar mit einem neuen Download der Jquery-ui

Lange Antwort

Mein Problem ist, dass ich gulp verwende, um alle meine CSS-Dateien in einer einzigen Datei zusammenzuführen. Wenn ich das tue, ändere ich den Ort des jquery-ui.min.css. Der CSS-Code für das Dialogfeld erwartet einen Ordner mit dem Namen Images im selben Verzeichnis und in diesem Ordner erwartet er Standardsymbole. da gulp die Bilder nicht in das neue Ziel kopierte, wurde das x-Symbol nicht angezeigt.

1
Mike A

Ein weiser Mann hat mir einmal geholfen.

Erstellen Sie im Ordner ...\css, in dem sich die Datei jquery-ui.css befindet, einen Ordner "images" und kopieren Sie 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ßen-Symbol erscheint.

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>
0
giri-webdev

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

From Web Developer showing the jquery-created code

Wenn ich den style = "display: none:" auf der Schaltfläche ausschalte, wird die Schließen-Schaltfläche angezeigt. Also aus irgendeinem Grund diese Anzeige: keine; wird eingestellt, und ich sehe nicht, wie ich das kontrollieren kann. Eine andere Möglichkeit, dies zu beheben, könnte darin bestehen, die Anzeige einfach zu überschreiben: keine. Sieh nicht, wie das geht.

Ich stelle fest, dass die von KyleMit veröffentlichte Antwort funktioniert, aber eine andere X-Schaltfläche aussieht.

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

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

Nach weiterer Arbeit entdeckte ich jedoch, dass in einigen Fällen die Titel nicht richtig eingestellt wurden. Nachdem das Problem behoben wurde, erschien der X-Schließen-Button wieder wie gewünscht.

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 durch jquery aus ac-popup und ui-dialog-title erstellt. Ein bisschen 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 der fehlenden Schaltfläche besser zu sein, obwohl ich nicht sicher bin, ob sie definitiv miteinander verbunden sind.

0
Jeffrey Simon

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>
0
Plentiful Lee