web-dev-qa-db-fra.com

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

J'utilise un dialogue modal jQuery dans mon application ASP .NET MVC 3. Cela fonctionne très bien, à part le fait qu’aucun bouton de fermeture ne s’affiche dans le coin supérieur droit. Comment puis-je ajouter ceci?

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

Dans le coin supérieur droit de la boîte de dialogue, placez le curseur devrait être sur le bouton et voyez si vous obtenez un effet (le survol du bouton). Essayez de cliquer dessus et de voir si ça ferme. S'il se ferme, il ne vous manque plus que les images-objets fournies avec le téléchargement de votre paquet.

37
PriorityMark

Une autre possibilité est de disposer de la bibliothèque bootstrap. Certaines versions de bootstrap et de jquery-ui sont en conflit avec la méthode .button (). Si votre fichier bootstrap.js est placé après jquery-ui.js, bootstrap .button () remplace le bouton jquery et le jquery-ui 'X 'image ne serait alors pas apparaître.

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

Cela fonctionne (case visible 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>
182
mekane84

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

Pure CSS Contournement:

J'utilisais à la fois l'interface utilisateur de bootstrap et de jQuery et je changeais l'ordre d'ajout des scripts pour casser 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
Binod

Bien que l'op ne déclare pas explicitement qu'ils utilisent jquery ui 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 la suivante:

    $('<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

Il suffit de vérifier le chemin de l'image du bouton de fermeture dans votre fichier 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}*/; 
}

Corrigez le chemin de icons_222222_256x240.png et ui-icons_454545_256x240.png

5
Lakshmi

En utilisant le principe de l'idée, l'utilisateur2620505 a 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
davidsonsns

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

4
epignosisx

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 en cas d'événement, vous devez supprimer cette

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

Je suppose qu'il y a un conflit avec d'autres bibliothèques 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
Adrian P.

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
Vaflan

Juste relier le CSS a fonctionné pour moi. Il se peut qu'il manque totalement à mon projet:

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

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 par conséquent non affiché) car il tente de résoudre la valeur de cette variable.

Les dialogues modaux ne doivent pas être fermés autrement qu'en appuyant sur les boutons [ok] ou [cancel]. Si vous voulez le [x] dans le coin droit, définissez modal: false ou supprimez-le tout simplement.

0
Affable Geek

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

Donc, un chmod + x dir-name rapide, et aussi pour les sous-dossiers, a fait l'affaire. Sans l'autorisation d'exécution sur Linux, Apache ne peut pas accéder au dossier.

0
user1269942

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

jetez un oeil à this exemple simple

0
zero7