[javascript] Finestra di dialogo dell'interfaccia utente jQuery - icona di chiusura mancante


Answers

Questo è un commento sulla risposta principale, ma ho ritenuto che valesse la sua risposta perché mi ha aiutato a rispondere al problema.

Se si desidera mantenere Bootstrap dichiarato dopo l'interfaccia utente di JQuery (l'ho fatto perché volevo utilizzare la descrizione $(document).ready Bootstrap), dichiarando quanto segue (l'ho dichiarato dopo $(document).ready ) consentirà al pulsante di apparire nuovamente (risposta da 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
Question

Sto usando un tema personalizzato jQuery 1.10.3. Ho scaricato tutti i diritti dal rullo del tema e non ho intenzionalmente cambiato nulla.

Creo una finestra di dialogo e ottengo un quadratino grigio vuoto in cui dovrebbe essere l'icona di chiusura:

Ho confrontato il codice generato sulla mia pagina:

<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>

al codice generato nella pagina Demo di dialogo :

<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: le diverse parti del codice sono generate da jQueryUI, non da me, quindi non posso semplicemente aggiungere i tag span senza modificare il file js jqueryui che sembra una scelta errata / non necessaria per ottenere la normale funzionalità.

Ecco il javascript utilizzato che genera quella parte del codice:

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

Sono in perdita e ho bisogno di aiuto. Grazie in anticipo.




Sto usando jQuery UI 1.8.17 e ho avuto lo stesso problema, in più avevo fogli di stile CSS aggiuntivi applicati alle cose nella pagina, incluso il colore della barra del titolo. Per evitare altri problemi, ho scelto come target gli elementi dell'interfaccia utente utilizzando il seguente codice:

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

Poi ho aggiunto un pulsante di chiusura nelle proprietà del dialogo stesso: ...

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

Per qualche ragione ho dovuto indirizzare entrambi gli elementi, ma funziona!




Ho avuto lo stesso esatto problema, forse l'hai già rilevato, ma l'hai risolto semplicemente posizionando la cartella "images" nella stessa posizione di jquery-ui.css




Questo è riportato come rotto in 1.10

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

phillip, il 29 gennaio 2013 alle 7:36, ha detto: Nelle versioni CDN manca il pulsante di chiusura della finestra di dialogo. C'è solo il tag button, lo span ui-icon è missong.

Ho scaricato la versione precedente e la X per il pulsante di chiusura mostra il backup.




Basta aggiungere il mancante:

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



Un uomo saggio una volta mi ha aiutato.

Nella cartella ...\css dove si trova il file jquery-ui.css , creare una cartella "images" e copiarne i file:

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

e viene visualizzata l'icona di chiusura.




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

}




Related