jQuery finestra di dialogo modale e finestra di dialogo CKEditor

Question

SOLUZIONE AGGIORNAMENTO

Dopo aver passato un po 'di ricerche, penso di poter fare una soluzione a questo problema. Per me, l'unica caratteristica dell'utilizzo di una finestra di dialogo modale è che impedisce l'accesso da elementi dietro di esso. Capisco che è proprio come usare la finestra di dialogo non modale con sovrapposizione dietro di esso. La sovrapposizione ha fatto solo il trucco di essere una finestra di dialogo modale (sebbene non sia completamente modale).

Quindi questa è la mia soluzione, prima di inizializzare la finestra di dialogo, inserisco un elemento div prima di esso e attribuisco la classe all'interfaccia utente- al div. È fatto usando il metodo .insertBefore(). E poi, alla finestra di dialogo 'close', rimuovo il div overlay. La finestra di dialogo 'modale' opzione è impostata su false. Usando questa soluzione, CKEditor pop up funziona bene, perché c'è solo una finestra di dialogo modale (CKEditor pop-up).

Ecco l'intero codice in jsfiddle. Spero che questo ti aiuti.

---

---

sto usando jQuery per visualizzare una finestra. Ho impostato questa finestra di dialogo sulla modalità modale. All'interno di questa finestra di dialogo includo un'area di testo, che verrà quindi utilizzata con CKEditor. Quando mostro la finestra di dialogo, la textarea viene convertita bene da CKEditor. Ma quando provate ad includere un'immagine (CKEditor visualizza IL SUO DIALOGO PROPRIO per l'input), non posso usare l'input dell'URL.

Questo è il mio codice per la finestra di init:

var $dialogJurnal = $("#dialog").dialog({ 
    autoOpen: false, 
    height: 630, 
    width: 'auto', 
    maxHeight: 630, 
    resize: 'auto', 
    modal: true 
}); 

Con questa configurazione, non posso cliccare la casella di testo e tipo.

---

E poi immagino fuori, che se ho impostato il modal a false, allora dovrebbe funzionare.

Questo è il codice:

var $dialogJurnal = $("#dialog").dialog({ 
    autoOpen: false, 
    height: 630, 
    width: 'auto', 
    maxHeight: 630, 
    resize: 'auto', 
    modal: false 
}); 

Con questo codice, tutto è normale, posso clic per TextBox e tipo.

---

Perché ho bisogno di abilitare la modalità modale, allora questo diventi il ​​mio problema. Penso che sia perché lo z-index della finestra di dialogo jQuery (o simile a quello) che blocca la finestra di dialogo di input di CKEditor. C'è qualcuno che può aiutarmi?

Answer 1

Recentemente, (solo questa settimana passata), mi sono imbattuto in un problema simile. Stavo per fare esattamente quello che hai fatto nel jsfiddle che hai fornito. Tuttavia, dopo alcune ricerche e giocando con ciò che accade nel codice dell'interfaccia utente di dialogo e ciò che stava succedendo con il markup nella pagina ho finalmente capito cosa dovevo fare.

E 'tutta una questione di widget di fabbrica e la funzione _allowInteraction.

Per me stavo usando la griglia SJSha ExtJs con filtro in una finestra di dialogo jQuery.La griglia funzionava bene, ma i filtri (il filtro della casella di testo) non funzionavano. Questo perché quando i filtri vengono visualizzati sono al di fuori della finestra di dialogo div, o del tag .ui-dialog.

Se si scava nella finestra di dialogo Codice UI nella funzione _allowInteraction, viene eseguita la seguente operazione.

//From the jQuery dialog UI 
_allowInteraction: function(event) { 
    if($(event.target).closest('.ui-dialog').length) { 
     return true; 
    } 

    // TODO: Remove hack when datepicker implements 
    // the .ui-front logic (#8989) 
    return !!$(event.target).closest(".ui-datepicker").length; 
} 

Tutto quello che dovevo fare era aggiungere un file javascript dopo il mio file UI jQuery con il seguente codice:

$.widget('ui.dialog', $.ui.dialog, { 
    _allowInteraction: function(event) { 
     //This overrides the jQuery Dialog UI _allowInteraction to handle the sencha 
     //extjs filter's not working. 
     //this._super(event) passes onto the base jQuery UI 
     return !!$(event.target).closest(".x-panel :input").length || this._super(event); 
    } 
} 

Dal momento che l'_allowInteraction fuoco ogni volta che si perde il focus dalla finestra, ho appena necessario per cercare .x-panel: input, poiché questo è ciò che è stato licenziato dall'evento.

Nel tuo caso, devi solo vedere qual è l'elemento più vicino a CKEditor. In questo modo non avresti bisogno di fare alcun tipo di soluzione alternativa e puoi semplicemente impostare l'opzione modale del dialogo su true. La ragione per cui non vuoi farlo è se dovessi visualizzare un'altra finestra di dialogo sopra quella. Le sovrapposizioni potrebbero essere ordinate erroneamente o aggiunte all'elemento sbagliato. L'interfaccia utente di dialogo ha già il codice per gestirlo.

Effettuando il $ .widget ('ui.dialog', $ .ui.dialog, function() {}); è applicato a tutte le finestre di dialogo ui per il nostro sito.

Working jsFiddle Demo

Punti di riferimento:

jQuery Dialog UI _allowInteraction

jQuery UI Widget Factory

Answer 2

Sì, modale di jQueryUI impedisce nulla al di fuori della finestra di jQuery per interagire con. Registra questo prima di creare il dialogo jQuery UI:

// Prevent jQuery UI modal from disabling ckeditor dialog inputs 
// @see http://api.jqueryui.com/dialog/#method-_allowInteraction 
$.widget("ui.dialog", $.ui.dialog, { 
    _allowInteraction: function(event) { 
     return !!$(event.target).closest(".cke_dialog").length || this._super(event); 
    } 
}); 

Fonte: http://bugs.jqueryui.com/ticket/9087#comment:14

Answer 3

Una soluzione più semplice che funziona per me è preso da un altro SO domanda che non menziona CKE, ma è di fare un non- modale modal: https://stackoverflow.com/a/28101676/4050940

basta eseguire questo dopo che il modal è aperto:

$(document).off('focusin.bs.modal'); 

e la finestra di CKEditor funzionerà fine