La boîte de dialog modale jQueryUI ne montre pas le bouton de fermeture (x)

Dans le coin supérieur droit de la boîte de dialog, placez la souris sur l’emplacement du bouton et voyez plutôt si vous obtenez un effet (le survol du bouton). Essayez de cliquer dessus et voir s’il se ferme. Si elle se ferme, il ne vous manque plus que les images-objects fournies avec le téléchargement de votre paquet.

Une autre possibilité est que vous ayez la bibliothèque bootstrap. Certaines versions de bootstrap et jquery-ui sont en conflit avec la méthode .button () et si votre bootstrap.js est placé après jquery-ui.js, le bootstrap .button remplace le bouton jquery et le jquery-ui ‘X L’image ne serait alors pas affichée.

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

Cela fonctionne (case visible visible):

Cela provoque le problème:

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

 $.fn.bootstrapBtn = $.fn.button.noConflict(); 

Pure solution de contournement CSS:

J’utilisais à la fois l’interface utilisateur bootstrap et jQuery et la modification de l’ordre d’ajout des scripts a brisé d’autres objects. J’ai fini par utiliser la pure solution de contournement CSS:

 .ui-dialog-titlebar-close { background: url("http://soffr.miximages.com/jquery/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://soffr.miximages.com/jquery/ui-icons_222222_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0); } 

Bien que l’op n’indique pas explicitement qu’ils utilisent jiery 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 entraînera des problèmes avec les couleurs des boutons.

La solution finale consiste à utiliser l’interface utilisateur bootstrap ou jquery, mais pas les deux. Cependant, une solution de contournement est:

  $('
dialog content
').dialog({ title: 'Title', open: function(){ var closeBtn = $('.ui-dialog-titlebar-close'); closeBtn.append('close'); } }); 

Il suffit de vérifier le chemin de l’image du bouton de fermeture dans votre 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

En utilisant le principe de l’idée, user2620505 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('close'); }, ... 

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

Je pense que le problème est que le navigateur ne peut pas charger l’image-object jQueryUI qui contient l’icône X. Veuillez utiliser Fiddler, Firebug ou toute autre application pouvant vous donner access aux requêtes HTTP effectuées par le navigateur sur le serveur et vérifier que l’image-object est correctement chargée.

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

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

et à la clôture, vous devez supprimer cette

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

Exemple complet

 
 Can you confirm you want to delete this event? 
 $("#deleteDialog").dialog({ width: 400, height: 200, modal: true, open: function () { var closeBtn = $('.ui-dialog-titlebar-close'); closeBtn.append(''); }, 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"); 

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.

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

Le simple fait de relier le CSS a fonctionné pour moi. Il était peut-être absent de mon projet entièrement:

Vous devez append des guillemets autour du “ok”. C’est le texte du bouton. Dans l’état actuel des choses, 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 boîtes de dialog modales ne sont pas censées être fermées 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 complètement.

une solution peut être d’avoir la proximité dans votre modal

jetez un oeil à cet exemple simple

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 dialog de fermeture n’apparaît plus. Mon problème était que lorsque je décompressais le paquetage js que j’avais téléchargé, les répertoires ne disposaient pas de l’autorisation d’exécution.

Un rapide chmod + x nom-répertoire, ainsi que pour les sous-dossiers, a donc fait l’affaire. Sans l’autorisation d’exécution sur Linux, apache ne peut pas accéder au dossier.