la boîte de dialogue modale jQueryUI n'affiche pas le bouton Fermer (x)

J'utilise une boîte de dialogue modale jQuery dans mon application ASP. NET MVC 3. Cela fonctionne bien sauf qu'il n'y a pas de bouton de fermeture dans le coin supérieur droit. Comment puis-je ajouter à cela?

$("#dialog-modal").dialog({
            modal: true,
            autoOpen: false,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });
65
demandé sur Sparky 2011-12-30 20:36:32

15 réponses

Dans le coin supérieur droit de la boîte de dialogue, passez la souris sur l'endroit où le bouton devrait être, et voyez plutôt ou non que vous obtenez un effet (le bouton survoler). Essayez de cliquer dessus et de voir si elle se ferme. Si elle se ferme, alors vous manquez juste vos sprites d'image qui sont venus avec votre téléchargement de paquet.

37
répondu PriorityMark 2011-12-30 18:36:50

Une autre possibilité est que vous avez la bibliothèque bootstrap. Certaines versions de bootstrap et jQuery-ui ont un conflit avec le .méthode button (), et si votre bootstrap.js est placé après jquery-ui.js, le bootstrap .button () remplace votre bouton jquery et l'image 'X' de jquery-ui n'apparaîtrait alors pas.

Voir ici: https://github.com/twbs/bootstrap/issues/6094

Cela fonctionne (fermer la boîte visible): 

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

Cela provoque le problème: 

<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>
180
répondu mekane84 2013-08-23 14:00:09

J'ai eu ce problème et j'ai pu le résoudre avec la déclaration ci-dessous. 

$.fn.bootstrapBtn = $.fn.button.noConflict();
38
répondu Yure Kesley 2015-06-23 14:40:35

Solution de contournement CSS Pure:

J'utilisais à la fois bootstrap et jQuery UI et changer l'ordre d'ajout des scripts a cassé d'autres objets. J'ai fini par utiliser une solution de contournement CSS pure: 

.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
répondu Binod 2016-02-05 07:33:28

Bien que l'op n'indique pas explicitement qu'ils utilisent l'interface utilisateur jQuery et bootstrap ensemble, un problème identique se produit si vous le faites. Vous pouvez résoudre le problème en chargeant bootstrap (js) avant jQuery ui (js). Cependant, cela causera des problèmes avec les couleurs d'état des boutons.

La solution finale consiste à utiliser bootstrap ou jQuery ui, mais pas les deux. Cependant, une solution de contournement est: 

    $('<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
répondu dhollenbeck 2013-07-25 21:19:41

Vérifiez simplement le chemin de l'image du bouton Fermer dans votre interface utilisateur jquery.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}*/; 
}

Corriger le chemin d'accès de icons_222222_256x240.png et ui-icons_454545_256x240.png

5
répondu Lakshmi 2013-06-13 07:41:11

En utilisant le principe de l'idée user2620505 obtenu un résultat avec l'implémentation de addClass: 

...
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>');
}, 
...

Si l'anglais est mauvais pardonnez-moi, j'utilise Google Translate.

5
répondu davidsonsns 2014-05-07 11:18:18

Je pense que le problème est que le navigateur n'a pas pu charger le sprite d'image jQueryUI qui contient L'icône X. Veuillez utiliser Fiddler, Firebug ou autre qui peut vous donner accès aux requêtes HTTP que le navigateur fait au serveur et vérifier que le sprite de l'image est chargé avec succès.

4
répondu epignosisx 2011-12-30 18:19:32

J'ai eu le même problème il suffit d'ajouter cette fonction aux options de dialogue ouvert et cela a fonctionné sharm 

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

Et lors de l'événement de fermeture, vous devez supprimer ce 

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

Exemple Complet

<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
répondu David Fawzy 2016-01-12 14:49:41

Je suppose qu'il y a un conflit avec une autre bibliothèque JS dans votre code. Essayez de forcer l'affichage du bouton de fermeture: 

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

Cela a fonctionné pour moi.

3
répondu Adrian P. 2013-09-08 15:39:37

Voici une excellente réponse https://stackoverflow.com/a/31045175/3778527 Je suis testé avec: 

<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
répondu Vaflan 2017-05-23 12:26:06

Juste lier le CSS a fonctionné pour moi. Il a peut-être été complètement absent de mon projet: 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
1
répondu fregas 2017-08-06 15:45:25

Vous devez ajouter des guillemets autour du "ok". C'est le texte du bouton. En l'état, le texte du bouton est actuellement vide (et donc non affiché) car il tente de résoudre la valeur de cette variable.

Les boîtes de dialogue modales ne sont pas destinées à être fermées autrement qu'en appuyant sur les boutons [ok] ou [annuler]. Si vous voulez le [x] dans le coin droit, définissez modal: false ou supprimez-le complètement.

0
répondu Affable Geek 2011-12-30 17:03:47

Une solution peut être d'avoir la fermeture à l'intérieur de votre modal

Prendre un coup d'oeil à ce exemple simple

0
répondu zero7 2011-12-30 18:13:41

J'ai eu un problème similaire. J'ai été à l'aide de jquery et jquery ui. Lorsque j'ai mis à jour mes versions, l'image de la boîte de dialogue de fermeture n'est plus apparue. Mon problème était que lorsque j'ai décompressé le paquet js que j'ai téléchargé, les répertoires n'avaient pas l'autorisation d'exécution.

Donc, un chmod rapide +X dir-name, et aussi pour les sous-dossiers, a fait l'affaire. Sans l'autorisation d'exécution sous linux, apache ne peut pas entrer dans le dossier.

0
répondu user1269942 2017-03-01 22:37:44