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





ui sliders (14)


Sono rimasto 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 here ) nel CSS dopo averlo scaricato e salvato 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 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.




Ho trovato tre correzioni:

  1. Puoi solo caricare prima bootsrap. 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 pulsanti di bootstrap.

  3. Voglio solo usare gli stili bootsrap e voglio anche avere il pulsante di chiusura con un'icona. Ho seguito il seguente:

    Come il pulsante vicino si occupa della 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;
    }
    



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://.com/a/23428433/4660870 )

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



Sto avendo questo problema pure. Ecco il codice che viene inserito per il pulsante di chiusura:

Quando disattivo lo stile = "display: none:" sul pulsante, viene visualizzato il pulsante di chiusura. Quindi per qualche ragione che display: nessuno; sta per essere impostato, e non vedo come controllarlo. Quindi un altro modo per affrontare questo potrebbe essere semplicemente sovrascrivere il display: nessuno. Non vedo come farlo però.

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

Ho anche notato che questo problema non ha effetto su tutti i dialoghi delle mie pagine, ma solo su alcuni di essi. Alcune finestre di dialogo funzionano come previsto; l'altro non ha titolo (cioè lo span contenente il titolo è vuoto) mentre è presente il pulsante di chiusura.

Sto pensando che qualcosa è 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 corretto, il pulsante di chiusura X è riapparso come dovrebbe 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 è creato apparentemente da jquery da ac-popup e ui-dialog-title. Una specie di kludge. Ma come ho detto, non funziona più, e devo invece usare il seguente:

$('.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 correlati.




Come riferimento, ho esteso il metodo aperto 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();
	}
});




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!




Se si chiama la finestra di dialogo () all'interno della funzione js, è possibile utilizzare i codici di conflitto del pulsante di avvio 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>



Sono in ritardo con questo per un po ', ma ho intenzione di farti saltare la testa, pronto?

Il motivo per cui questo sta accadendo è che stai chiamando bootstrap, dopo che stai chiamando 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 interesse mesi dopo, quindi ho pensato che valesse la pena di essere modificato. In realtà mi piace davvero la soluzione noConflict offerta nel commento sotto questa risposta e chiarita dall'utente Pretty Cool come risposta separata. Come alcuni hanno segnalato problemi con il tooltip bootstrap quando gli script vengono scambiati. Tuttavia, non ho riscontrato questo problema perché ho scaricato l'interfaccia utente di jquery senza il tooltip perché non ne avevo bisogno perché bootstrap. Quindi questo problema non mi è mai venuto in mente.

Modifica - 22/07/2015 - Non confondere jquery-ui con jquery ! Mentre JavaScript di Bootstrap richiede jQuery per essere caricato prima, non si basa su jQuery-UI. Quindi jquery-ui.js può essere caricato dopo bootstrap.min.js , mentre jquery.js deve sempre essere caricato prima di Bootstrap.




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.




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 Images nello stesso punto in cui hai jquery-ui.min.css . La cartella images 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 si aspetta una cartella chiamata Images nella 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.




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

}




Basta aggiungere il mancante:

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



Se si desidera solo invertire lo stato corrente (come un comportamento del pulsante di attivazione / disattivazione):

$("input").prop('disabled', ! $("input").prop('disabled') );




javascript jquery-ui jquery-ui-dialog imagebutton