it-swarm.com.de

in jQueryUI-Modal-Dialogfeld wird keine Schaltfläche zum Schließen (X) angezeigt.

Ich verwende ein modifiziertes jQuery-Dialogfeld in meiner ASP .NET MVC 3-Anwendung. Es funktioniert gut, außer dass in der oberen rechten Ecke keine Schaltfläche zum Schließen angezeigt wird. Wie kann ich das hinzufügen?

$("#dialog-modal").dialog({
            modal: true,
            autoOpen: false,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });
65
Antarr Byrd

In der oberen rechten Ecke des Dialogs fahren Sie mit der Maus darüber, wo der Button sollte sein soll, und sehen oder sehen Sie einen Effekt (der Button hover). Versuchen Sie, darauf zu klicken und zu sehen, ob es geschlossen wird. Wenn es geschlossen wird, verpassen Sie einfach Ihre Image-Sprites, die mit Ihrem Paketdownload geliefert wurden.

37
PriorityMark

Eine andere Möglichkeit ist, dass Sie die Bootstrap-Bibliothek haben. Einige Versionen von bootstrap und jquery-ui haben einen Konflikt mit der .button () -Methode. Wenn Ihre bootstrap.js nach jquery-ui.js platziert wird, überschreibt der bootstrap .button () Ihre Jquery-Schaltfläche und das Jquery-ui 'X 'Bild würde dann nicht auftauchen.

siehe hier: https://github.com/twbs/bootstrap/issues/6094

Das funktioniert (Box schließen):

<script src="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Das verursacht das Problem:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
182
mekane84

Ich hatte dieses Problem und konnte es mit der folgenden Erklärung beheben. 

$.fn.bootstrapBtn = $.fn.button.noConflict();
38
Yure Kesley

Pure CSS Workaround:

Ich benutzte sowohl Bootstrap als auch jQuery UI und änderte die Reihenfolge beim Hinzufügen der Skripte und brach einige andere Objekte. Am Ende habe ich pure CSS-Workaround verwendet:

.ui-dialog-titlebar-close {
  background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_888888_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0);
  border: medium none;
}
.ui-dialog-titlebar-close:hover {
  background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_222222_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0);
}
18
Binod

Während die Operation nicht ausdrücklich erklärt, dass sie Jquery UI und Bootstrap zusammen verwenden, tritt ein identisches Problem auf. Sie können das Problem beheben, indem Sie bootstrap (js) vor jquery ui (js) laden. Dies führt jedoch zu Problemen mit den Statusfarben der Schaltflächen. 

Die endgültige Lösung besteht darin, entweder Bootstrap oder Jquery Ui zu verwenden, jedoch nicht beide. Eine Problemumgehung ist jedoch:

    $('<div>dialog content</div>').dialog({
        title: 'Title',
        open: function(){
            var closeBtn = $('.ui-dialog-titlebar-close');
            closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>');
        }
    });
12
dhollenbeck

Überprüfen Sie einfach den Bildpfad der Schaltfläche zum Schließen in Ihrer jquery-ui.css:

.ui-icon { 
    width: 16px; 
    height: 16px; 
    background-image: url**(../img/ui-icons_222222_256x240.png)**/*{iconsContent}*/; 
}
.ui-widget-content .ui-icon {
    background-image: url(../img/ui-icons_222222_256x240.png)/*{iconsContent}*/; 
}
.ui-widget-header .ui-icon {
    background-image: url(../img/ui-icons_222222_256x240.png)/*{iconsHeader}*/; 
}
.ui-state-default .ui-icon { 
    background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; 
}
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
    background-image: url(../img/ui-icons_454545_256x240.png)/*{iconsHover}*/; 
}
.ui-state-active .ui-icon {
    background-image: url(../img/ui-icons_454545_256x240.png)/*{iconsActive}*/; 
}

Korrigieren Sie den Pfad von icons_222222_256x240.png und ui-icons_454545_256x240.png

5
Lakshmi

Nach dem Prinzip der Idee hat der Benutzer 2620505 das Ergebnis bei der Implementierung von addClass erhalten:

...
open: function(){
    $('.ui-dialog-titlebar-close').addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only');
    $('.ui-dialog-titlebar-close').append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>');
}, 
...

Wenn Englisch schlecht ist, vergib mir, ich verwende Google Translate.

5
davidsonsns

Ich denke, das Problem ist, dass der Browser das jQueryUI-Image-Sprite mit dem X-Symbol nicht laden konnte. Bitte verwenden Sie Fiddler, Firebug oder ein anderes Programm, das Ihnen Zugriff auf die HTTP-Anforderungen des Browsers an den Server gibt und das Image des Sprites erfolgreich geladen wird.

4
epignosisx

Ich hatte das gleiche Problem, fügte diese Funktion einfach zu den Optionen des offenen Dialogs hinzu und es funktionierte sharm

open: function(){
            var closeBtn = $('.ui-dialog-titlebar-close');
            closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>');
        },

und bei einem nahen Ereignis müssen Sie das entfernen

close: function () {
            var closeBtn = $('.ui-dialog-titlebar-close');
            closeBtn.html('');}

Vollständiges Beispiel

<div id="deleteDialog" title="Confirm Delete">
 Can you confirm you want to delete this event?
</div> 

$("#deleteDialog").dialog({
                width: 400, height: 200,
                modal: true,
                open: function () {
                    var closeBtn = $('.ui-dialog-titlebar-close');
                    closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>');
                },
                close: function () {
                    var closeBtn = $('.ui-dialog-titlebar-close');
                    closeBtn.html('');
                },
                buttons: {
                    "Confirm": function () {
                        calendar.fullCalendar('removeEvents', event._id);
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });

            $("#dialog").dialog("open");
4
David Fawzy

Ich vermute, es gibt einen Konflikt mit anderen JS-Bibliotheken in Ihrem Code. Versuchen Sie das Schließen der Schaltfläche zu erzwingen:

...
open:function () {
  $(".ui-dialog-titlebar-close").show();
} 
...

Das hat bei mir funktioniert. 

3
Adrian P.

Hier ist eine gute Antwort https://stackoverflow.com/a/31045175/3778527 .

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
2
Vaflan

Nur das CSS zu verlinken funktionierte für mich. Es könnte in meinem Projekt völlig gefehlt haben:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
1
fregas

Sie müssen Anführungszeichen um das "OK" hinzufügen. Das ist der Text der Schaltfläche. Der Text der Schaltfläche ist derzeit leer (und wird daher nicht angezeigt), da versucht wird, den Wert dieser Variablen aufzulösen.

Modale Dialoge sollten nicht auf andere Weise geschlossen werden, als durch Drücken der Tasten [ok] oder [cancel]. Wenn Sie [x] in der rechten Ecke haben möchten, setzen Sie modal: false oder entfernen Sie es ganz.

0
Affable Geek

Ich hatte ein ähnliches Problem. Ich habe Jquery und Jquery-Ui benutzt. Bei einem Upgrade meiner Versionen wurde das Bild zum Schließen des Dialogs nicht mehr angezeigt. Mein Problem war, dass die Verzeichnisse nicht die Ausführungsberechtigung hatten, als ich das heruntergeladene Paket js entpackte. 

Also kam ein schneller chmod + x dir-name und auch für die Unterordner der Trick. Ohne die Ausführungsberechtigung für Linux kann Apache nicht in den Ordner gelangen.

0
user1269942

eine Lösung kann das Schließen in Ihrem Modal sein

werfen Sie einen Blick auf dies einfaches Beispiel

0
zero7