Boîte de dialogue jQuery UI - icône de fermeture manquante

J'utilise un thème jQuery 1.10.3 personnalisé. J'ai téléchargé chaque directement à partir du rouleau de thème et je n'ai intentionnellement rien changé.

Je crée une boîte de dialogue et j'obtiens un carré gris vide où l'icône de fermeture devrait être:

J'ai comparé le code généré sur ma page:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <spanid="ui-id-2" class="ui-dialog-title">Title</span>
    <button class="ui-dialog-titlebar-close"></button>
</div>

au code généré sur la page Dialog Demo :

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
        <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
        <span class="ui-button-text">close</span>
    </button>
</div>

EDIT: Les différentes parties du code sont générées par jQueryUI, pas moi, donc je ne peux pas simplement ajouter les balises span sans modifier le fichier jqueryui js, ce qui semble être un choix mauvais / inutile pour atteindre les fonctionnalités normales.

Voici le javascript utilisé qui génère cette partie du code:

this.element.dialog({
    appendTo: "#summary_container",
    title: this.title(),
    closeText: "Close",
    width: this.width,
    position: {
        my: "center top",
        at: ("center top+"+(window.innerHeight*.1)),
        collision: "none"
    },
    modal: false,
    resizable: false,
    draggable: false,
    show: "fold",
    hide: "fold",
    close: function(){
        if(KOVM.areaSummary.isVisible()){
            KOVM.areaSummary.isVisible(false);
        }
    }
});

Je suis perdu et j'ai besoin d'aide. Merci d'avance.

Je suis en retard pour celui-ci d'un moment, mais je vais vous épater, prêt?

La raison pour laquelle cela se produit, c'est que vous appelez bootstrap in, après avoir appelé jquery-ui in.

Littéralement, échangez les deux pour qu'au lieu de:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

il devient

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

:)

Edit - 26/06/2015 - cela continue de susciter l'intérêt des mois plus tard, alors j'ai pensé que cela valait la peine d'être modifié. En fait, j'aime beaucoup la solution noConflict proposée dans le commentaire sous cette réponse et clarifiée par l'utilisateur Pretty Cool en tant que réponse séparée. Comme certains ont signalé des problèmes avec l'info-bulle d'amorçage lorsque les scripts sont échangés. Cependant, je n'ai pas rencontré ce problème parce que j'ai téléchargé l'interface utilisateur jquery sans l'info-bulle, car je n'en avais pas besoin car bootstrap. Donc, ce problème ne s'est jamais posé pour moi.

Edit - 22/07/2015 - Ne pas confondre jquery-uiavec jquery! Bien que JavaScript de Bootstrap nécessite que jQuery soit chargé avant, il ne repose pas sur jQuery-UI. Ainsi jquery-ui.jspeut être chargé après bootstrap.min.js, alors qu'il jquery.jsdoit toujours être chargé avant Bootstrap.

Ceci est un commentaire sur la réponse principale, mais j'ai senti que cela valait sa propre réponse car cela m'a aidé à répondre au problème.

Si vous voulez garder Bootstrap déclaré après JQuery UI (je l'ai fait parce que je voulais utiliser l'info-bulle Bootstrap), déclarer ce qui suit (je l'ai déclaré après $(document).ready) permettra au bouton de réapparaître (réponse de https://stackoverflow.com/ a / 23428433/4660870 )

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Cela semble être un bogue dans la façon dont jQuery est livré. Vous pouvez le réparer manuellement avec une manipulation dom sur l' Dialog Openévénement:

$("#selector").dialog({
    open: function() {
        $(this).closest(".ui-dialog")
        .find(".ui-dialog-titlebar-close")
        .removeClass("ui-dialog-titlebar-close")
        .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
    }
});

Ceci est signalé comme cassé dans 1.10

http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/

phillip le 29 janvier 2013 à 7h36 a déclaré: Dans les versions CDN, le bouton de fermeture de la boîte de dialogue est manquant. Il n'y a que la balise button, l'icône span ui est manquante.

J'ai téléchargé la version précédente et le X pour le bouton de fermeture s'affiche de nouveau.

J'ai trouvé trois correctifs:

1. Vous pouvez simplement charger bootsrap en premier. Et ils chargent jquery-ui. Mais ce n'est pas une bonne idée. Parce que vous verrez des erreurs dans la console.

2. Ce:

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

   aide. Mais les autres boutons semblent terribles. Et maintenant, nous n'avons pas de boutons d'amorçage.

3. Je veux juste utiliser des styles bootsrap et aussi je veux avoir un bouton de fermeture avec une icône. J'ai fait ce qui suit:

   À quoi ressemble le bouton de fermeture après le correctif

   .ui-dialog-titlebar-close {
       padding:0 !important;
   }
   
   .ui-dialog-titlebar-close:after {
       content: '';
       width: 20px;
       height: 20px;
       display: inline-block;
       /* Change path to image*/
       background-image: url(themes/base/images/ui-icons_777777_256x240.png);
       background-position: -96px -128px;
       background-repeat: no-repeat;
   }

J'ai eu exactement le même problème, peut-être que vous avez déjà vérifié cela, mais que vous l'avez résolu simplement en plaçant le dossier "images" au même emplacement que le jquery-ui.css

Je suis resté coincé avec le même problème et après avoir lu et essayé toutes les suggestions ci-dessus, j'ai juste essayé de remplacer manuellement cette image (que vous pouvez trouver ici ) dans le CSS après l'avoir téléchargée et enregistrée dans le dossier images sur mon application et voilá, problème résolu!

voici le CSS:

.ui-state-default .ui-icon {
        background-image: url("../img/ui-icons_888888_256x240.png");
}

J'utilise jQuery UI 1.8.17 et j'ai eu le même problème, en plus des feuilles de style css supplémentaires étaient appliquées aux éléments de la page, y compris la couleur de la barre de titre. Donc, pour éviter tout autre problème, j'ai ciblé les éléments exacts de l'interface utilisateur en utilisant le code ci-dessous:

$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();    
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();

Ensuite, j'ai ajouté un bouton de fermeture dans les propriétés de la boîte de dialogue elle-même: ...

modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...

Pour une raison quelconque, j'ai dû cibler les deux éléments, mais cela fonctionne!

Je sais que cette question est ancienne mais je viens d'avoir ce problème avec jquery-ui v1.12.0.

Réponse courte Assurez-vous que vous avez un dossier appelé Imagesau même endroit que vous jquery-ui.min.css. Le dossier images doit contenir les images trouvées avec un nouveau téléchargement de jquery-ui

Longue réponse

Mon problème est que j'utilise gulp pour fusionner tous mes fichiers css en un seul fichier. Lorsque je fais cela, je change l'emplacement du fichier jquery-ui.min.css. Le code css de la boîte de dialogue attend un dossier appelé Imagesdans le même répertoire et à l'intérieur de ce dossier, il attend des icônes par défaut. puisque gulp ne copiait pas les images dans la nouvelle destination, il n'affichait pas l'icône x.

À titre de référence, voici comment j'ai étendu la méthode ouverte selon la suggestion de @ john-macintyre:

$.widget( "ui.dialog", $.ui.dialog, {
	open: function() {
		$(this.uiDialogTitlebarClose)
			.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>");
		// Invoke the parent widget's open().
		return this._super();
	}
});

  just add in css
 .ui-icon-closethick{
 margin-top: -8px!important;
margin-left: -8px!important;

}

Si vous appelez la boîte de dialogue () dans la fonction js, vous pouvez utiliser les codes de conflit du bouton d'amorçage ci-dessous

 <div class="row">
   <div class="col-md-12">
       <input type="button" onclick="ShowDialog()"  value="Open Dialog" id="btnDialog"/>
   </div>
</div>

<div style="display:none;" id="divMessage">
    <table class="table table-bordered">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Giri</td>
            <td>Prasad</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Bala</td>
            <td>Kumar</td>
            <td>24</td>
        </tr>
    </table> 
</div>



<script type="text/javascript">
    function ShowDialog()
    {
        if (typeof $.fn.bootstrapBtn =='undefined') {
            $.fn.bootstrapBtn = $.fn.button.noConflict();
        }

        $('#divMessage').dialog({
            title:'Employee Info',
            modal:true
        });
    }
    </script>

Un homme sage m'a aidé une fois.

Dans le dossier où jquery-ui.cssse trouve, créez un dossier nommé «images» et copiez-y les fichiers ci-dessous:

ui-icons_444444_256x240.png

ui-icons_555555_256x240.png

ui-icons_777620_256x240.png

ui-icons_777777_256x240.png

ui-icons_cc0000_256x240.png

ui-icons_ffffff_256x240.png

et l'icône de fermeture apparaît.

Ajoutez simplement les éléments manquants:

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>

J'ai aussi ce problème. Voici le code qui est inséré pour le bouton de fermeture:

Lorsque je désactive le style = "display: none:" sur le bouton, le bouton de fermeture apparaît. Donc, pour une raison quelconque, cet affichage: aucun; se prépare, et je ne vois pas comment contrôler cela. Une autre façon de résoudre ce problème pourrait être de simplement remplacer l'affichage: aucun. Je ne vois pas comment faire ça.

Je note que la réponse publiée par KyleMit fonctionne, mais crée un bouton X différent.

Je note également que ce problème n'affecte pas toutes les boîtes de dialogue de mes pages, mais seulement certaines d'entre elles. Certains dialogues fonctionnent comme prévu; les autres n'ont pas de titre (c'est-à-dire que la plage contenant le titre est vide) tant que le bouton de fermeture est présent.

Je pense que quelque chose ne va vraiment pas et que ce n'est peut-être pas le moment pour 1.10.x.

Mais après d'autres travaux, j'ai découvert que dans certains cas, les titres n'étaient pas correctement définis et, après avoir corrigé cela, le bouton de fermeture X est réapparu comme il se doit.

J'avais l'habitude de définir les titres comme ceci:

('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);

Cet identifiant n'existe pas dans mon code, mais est créé apparemment par jquery à partir de ac-popup et ui-dialog-title. Une sorte de kludge. Mais comme je l'ai dit, cela ne fonctionne plus, et je dois utiliser ce qui suit à la place:

$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);

Après cela, le problème des boutons manquants semble être meilleur, même si je ne suis pas sûr qu'ils soient définitivement liés.

Même en chargeant bootstrap après jquery-ui, j'ai pu résoudre en utilisant ceci:

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}