web-dev-qa-db-fra.com

boîte de dialogue de l'interface utilisateur jQuery - icône de fermeture manquante

J'utilise un thème jQuery 1.10.3 personnalisé. J'ai téléchargé chaque suite 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 dans lequel l'icône de fermeture devrait être: Screen shot of missing close icon

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 inutile/inutile fonctionnalité normale.

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 perdue et j'ai besoin d'aide. Merci d'avance.

javascriptjquery-uijquery-ui-dialogimagebutton
168
Xion Dark

Je suis en retard pour celui-ci de temps en temps, mais je vais vous épater, prêt?

La raison en est que vous appelez bootstrap in, une fois que vous avez appelé jquery-ui in.

Littéralement, permutez 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 je pensait que cela valait la peine de le modifier. En fait, j'aime beaucoup le noConflict solution proposée dans le commentaire sous cette réponse et clarifiée par l'utilisateur Pretty Cool comme une 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. Je n'ai pas rencontrez ce problème cependant parce que j’ai téléchargé jquery UI sans l'info-bulle comme je n'en avais pas besoin parce que bootstrap. Donc, cette question ne jamais est venu pour moi.

Éditer - 22/07/2015 - Ne confondez pas jquery-ui avec jquery! Tandis que Le code JavaScript de Bootstrap nécessite le chargement de jQuery avant, il ne repose pas sur jQuery-UI. Donc, jquery-ui.js peut être chargé après bootstrap.min.js, alors que jquery.js doit toujours être chargé avant Bootstrap.

400
David G

Ceci est un commentaire sur la réponse principale, mais j’ai pensé que cela valait sa propre réponse car cela m’a aidé à résoudre le problème.

Si vous souhaitez que Bootstrap soit déclaré après l'interface utilisateur de JQuery (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 s'afficher à nouveau (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
39
Pretty Cool

Cela semble être un bug dans la façon dont jQuery est livré. Vous pouvez y remédier manuellement avec quelques manipulations de dom sur l'événement Dialog Open :

$("#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>");
    }
});
20
KyleMit

Ceci est rapporté comme cassé dans 1.10

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

phillip le 29 janvier 2013 à 7h36 a dit: Dans les versions CDN, le Le bouton de fermeture de la boîte de dialogue est manquant. Il n’ya que la balise button, le span ui-icon est missong.

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

15
Robert

J'ai trouvé trois correctifs:

  1. Vous pouvez simplement charger bootsrap en premier. Et les charger 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 sont terribles. Et maintenant, nous n'avons pas de boutons bootstrap.

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

    Comment le bouton de fermeture a l'air 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;
}
13
Yauheni Charniauski

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

8
Juan Hernández

Je me suis retrouvé avec le même problème et après avoir lu et essayé toutes les suggestions ci-dessus, je viens d'essayer 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 de mon app et voila, le problème est résolu!

voici le CSS:

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

J'utilise jQuery UI 1.8.17 et j'ai le même problème. De plus, des feuilles de style CSS supplémentaires ont été appliquées aux éléments de la page, notamment la couleur. Donc, pour éviter tout autre problème, j'ai ciblé les éléments d'interface utilisateur exacts à l'aide du 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, je devais cibler les deux éléments, mais cela fonctionne!

2
James Drinkard

En guise 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();
	}
});

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

}

1
Shashidhar

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 d'avoir un dossier appelé Images à l'emplacement même emplacement vous avez 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. Quand je le fais, je change l'emplacement du jquery-ui.min.css. Le code CSS de la boîte de dialogue attend un dossier appelé Images dans 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 ne montrait pas l'icône x.

1
Mike A

Un homme sage m'a aidé une fois.

Dans le dossier ...\css où se trouve le fichier jquery-ui.css, créez un dossier "images" et copiez-y les fichiers:

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.

0
Boris Prashchurovich

Si vous appelez dialog () dans la fonction js, vous pouvez utiliser les codes de conflit de boutons 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>
0
giri-webdev

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

From Web Developer showing the jquery-created code

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

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

Je remarque également que ce problème n’affecte pas tous les dialogues de mes pages, mais seulement certains d’entre eux. 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 il se peut que l'heure ne soit pas à 1.10.x.

Mais après un travail plus approfondi, j’ai découvert que dans certains cas, les titres n’étaient pas correctement configurés et qu’après avoir résolu le problème, le bouton Fermer X réapparaissait 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 de ui-dialog-title. Une sorte de kludge. Mais comme je l'ai dit, cela ne fonctionne plus et je dois utiliser les éléments suivants:

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

Après cela, la question du bouton manquant semble être meilleure, bien que je ne sois pas sûr qu’ils soient vraiment liés.

0
Jeffrey Simon

Il suffit d'ajouter les éléments manquants:

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