jQuery UI dialogue - manque l’icône fermer

Question

Je suis en utilisant une mesure de jQuery 1.10.3 thème. J'ai téléchargé toutes les droites à partir du thème du rouleau et j'ai intentionnellement pas changé quoi que ce soit.

J'ai créer une boîte de dialogue et j'obtiens un vide carré gris où l'icône de fermeture doit être:

J'ai comparé le code qui est 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>

pour le code généré sur la boîte de Dialogue page de Démonstration:

<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és par jQueryUI, pas à moi donc je ne peux pas il suffit d'ajouter les balises span, sans avoir à éditer le jqueryui fichier js qui ressemble à un mauvais/inutile de choix pour atteindre la fonctionnalité normale.

Voici le code javascript utilisé que 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 à une perte et ont besoin d'aide. Merci à l'avance.

Answer 1

Je suis en retard à celui-ci par un certain temps, mais je vais souffler votre esprit, prêt ?

C’est le cas, est parce que vous appelez « bootstrap », après que vous appelez jquery-ui.

Littéralement, échanger les deux afin qu’au lieu de :

il devient

)

Answer 2

Cela semble être un bogue dans la façon dont jQuery navires. Vous pouvez le fixer manuellement avec une manipulation dom le `` événement :

Answer 3

Ceci est rapporté comme cassée en 1.10

http://blog.jQueryUI.com/2013/01/jQuery-UI-1-10-0/

Phillip le 29 janvier 2013 à 07:36 a dit : les versions dans le CDN, le bouton fermer de la boîte de dialogue est absent. Il n’y a seulement la balise button, le span ui-icon est missong.

J’ai téléchargé la version précédente et le X pour fermer montre vers le haut.

Answer 4

J’ai eu le même problème exact, peut-être vous déjà chececked que ça bien mais il résolu simplement en plaçant le dossier « images » dans le même emplacement que le jquery-ui.css

Answer 5

J’utilise jQuery UI 1.8.17); j’ai eu ce même problème, et j’ai eu les feuilles de style css supplémentaire appliquées aux choses dans la page, y compris la couleur de la barre de titre. Donc pour éviter toute autre question, j’ai ciblé les éléments d’interface utilisateur exacte en utilisant le code ci-dessous :

Puis j’ai ajouté un bouton de fermeture dans les propriétés de la boîte de dialogue lui-même :...

Pour une raison quelconque, il fallait cibler les deux points, mais ça marche !