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

Sto usando un tema jQuery 1.10.3 personalizzato. Ho scaricato tutti i file direttamente dal rullo dei temi e non ho modificato intenzionalmente nulla.

Creo una finestra di dialogo e ottengo un quadrato grigio vuoto dove 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 della finestra 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 jqueryui js che sembra una scelta errata / non necessaria per raggiungere 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.

Sono in ritardo a questo da un po ', ma ti lascerò a bocca aperta, pronto?

Il motivo per cui ciò sta accadendo è perché stai chiamando bootstrap, dopo aver chiamato jquery-ui.

Letteralmente, scambia i due in modo che invece di:

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

diventa

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

:)

Modifica - 26/06/2015 - questo continua ad attirare l'interesse mesi dopo, quindi ho pensato che valesse la pena modificarlo. In realtà mi piace molto la soluzione noConflict offerta nel commento sotto questa risposta e chiarita dall'utente Pretty Cool come risposta separata. Come alcuni hanno segnalato problemi con la descrizione del bootstrap quando gli script vengono scambiati. Tuttavia, non ho riscontrato questo problema perché ho scaricato l'interfaccia utente di jquery senza la descrizione comando poiché non ne avevo bisogno perché bootstrap. Quindi questo problema non mi è mai venuto in mente.

Modifica - 22/07/2015 - Non confondere jquery-uicon jquery! Sebbene JavaScript di Bootstrap richieda il caricamento precedente di jQuery, non si basa sull'interfaccia utente di jQuery. Quindi jquery-ui.jspuò essere caricato dopo bootstrap.min.js, mentre jquery.jsdeve sempre essere caricato prima di Bootstrap.

Questo è un commento sulla risposta migliore, ma ho sentito che valeva la sua risposta perché mi ha aiutato a rispondere al problema.

Se vuoi mantenere Bootstrap dichiarato dopo l'interfaccia utente di JQuery (l'ho fatto perché volevo usare la descrizione del Bootstrap), dichiarando quanto segue (l'ho dichiarato dopo $(document).ready) consentirà di visualizzare nuovamente il pulsante (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

Questo sembra essere un bug nel modo in cui viene spedito jQuery. Puoi risolverlo manualmente con qualche manipolazione di dom Dialog Opensull'evento:

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

Questo è segnalato 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 del pulsante, l'icona dell'interfaccia utente span è errata.

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

Ho trovato tre soluzioni:

1. Puoi solo caricare bootsrap prima. E caricano jquery-ui. Ma non è una buona idea. Perché vedrai errori nella console.

2. Questo:

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

   aiuta. Ma altri pulsanti sembrano terribili. E ora non abbiamo i pulsanti bootstrap.

3. Voglio solo usare gli stili di scarponi e voglio anche avere un pulsante di chiusura con un'icona. Ho fatto quanto segue:

   Come si chiude il pulsante vicino dopo la correzione

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

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

Mi sono bloccato con lo stesso problema e dopo aver letto e provato tutti i suggerimenti sopra ho appena provato a sostituire manualmente questa immagine (che puoi trovare qui ) nel CSS dopo averla scaricata e salvata nella cartella delle immagini sulla mia app e voilá, problema risolto!

ecco il CSS:

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

Sto usando l'interfaccia utente 1.8.17 di jQuery e ho avuto lo stesso problema, in più ho avuto fogli di stile CSS aggiuntivi applicati alle cose sulla pagina, incluso il colore della barra del titolo. Quindi, per evitare qualsiasi altro problema, ho preso di mira gli esatti elementi dell'interfaccia utente usando il codice seguente:

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

Quindi ho aggiunto un pulsante di chiusura nelle proprietà della finestra stessa: ...

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

Per qualche motivo ho dovuto scegliere come target entrambi gli oggetti, ma funziona!

So che questa domanda è vecchia ma ho appena avuto questo problema con jquery-ui v1.12.0.

Risposta breve Assicurati di avere una cartella chiamata Imagesnello stesso posto che hai jquery-ui.min.css. La cartella delle immagini deve contenere le immagini trovate con un nuovo download di jquery-ui

Risposta lunga

Il mio problema è che sto usando gulp per unire tutti i miei file CSS in un singolo file. Quando lo faccio, sto cambiando la posizione di jquery-ui.min.css. Il codice CSS per la finestra di dialogo prevede una cartella chiamata Imagesnella stessa directory e all'interno di questa cartella si aspetta icone predefinite. poiché gulp non stava copiando le immagini nella nuova destinazione, non mostrava l'icona x.

Come riferimento, è così che ho esteso il metodo open come suggerito da @ 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;

}

Se stai chiamando la finestra di dialogo () all'interno della funzione js, puoi utilizzare i codici di conflitto del pulsante bootstrap di seguito

 <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 uomo saggio una volta mi ha aiutato.

Nella cartella in cui jquery-ui.csssi trova, crea una cartella denominata "immagini" e copia in essa i file seguenti:

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 appare l'icona di chiusura.

Aggiungi il mancante:

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

Sto riscontrando anche questo problema. Ecco il codice che viene inserito per il pulsante di chiusura:

Quando spengo lo stile = "display: none:" sul pulsante, viene visualizzato il pulsante di chiusura. Quindi per qualche motivo che mostra: nessuno; si sta preparando e non vedo come controllarlo. Quindi un altro modo per risolvere questo problema potrebbe essere semplicemente quello di ignorare il display: nessuno. Non vedo come farlo però.

Noto che la risposta pubblicata da KyleMit funziona, ma crea un pulsante X dall'aspetto diverso.

Noto anche che questo problema non riguarda tutte le finestre di dialogo delle mie pagine, ma solo alcune. Alcune finestre di dialogo funzionano come previsto; l'altro non ha titolo (ovvero, l'intervallo contenente il titolo è vuoto) mentre è presente il pulsante di chiusura.

Sto pensando che qualcosa sia seriamente sbagliato e potrebbe non essere il momento per 1.10.x.

Ma dopo ulteriori lavori, ho scoperto che in alcuni casi i titoli non venivano impostati correttamente e, dopo averlo risolto, il pulsante di chiusura X riappariva come doveva essere.

Ho usato per impostare i titoli in questo modo:

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

Questo id non esiste nel mio codice, ma è apparentemente creato da jquery da ac-popup e ui-dialog-title. Tipo di kludge. Ma come ho detto che non funziona più, e invece devo usare quanto segue:

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

Dopo averlo fatto, il problema del pulsante mancante sembra essere migliore, anche se non sono sicuro che siano sicuramente correlati.

Anche caricando bootstrap dopo jquery-ui, sono stato in grado di risolvere usando questo:

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