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

Question

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

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

Answer 1

Une autre possibilité est que vous ayez la bibliothèque bootstrap. Certaines versions de bootstrap et de jquery-ui sont en conflit avec la méthode .button(), et si votre bootstrap.js est placé après jquery-ui.js, le .button() de bootstrap l'emporte sur votre bouton jquery et l'image 'X' de jquery-ui ne s'affiche pas.

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

Cela fonctionne (boîte de fermeture 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>

C'est ce qui cause 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>

Answer 2

Dans le coin supérieur droit de la boîte de dialogue, passez la souris sur l'endroit où le bouton debe et voyez si vous obtenez ou non un effet (le survol du bouton). Essayez de cliquer dessus et voyez s'il se ferme. S'il se ferme, il ne vous manque plus que les sprites d'image fournis avec le téléchargement de votre pack.

Answer 3

Solution purement CSS :

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

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

Answer 4

Bien que l'op ne déclare pas explicitement qu'il utilise 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 posera des problèmes avec les couleurs d'état des boutons.

La solution finale consiste à utiliser soit bootstrap, soit jquery ui, mais pas les deux. Cependant, il existe une solution de contournement :

    $('<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>');
        }
    });

Answer 5

En utilisant le principe de l'idée de 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.