jQuery मोडल संवाद और सीकेडिटर इनपुट संवाद

Question

समाधान अद्यतन

कुछ समय के लिए खोज करने के बाद, मुझे लगता है कि मैं इसका कामकाज कर सकता हूं। मेरे लिए, एक मॉडल संवाद का उपयोग करने की एकमात्र विशेषता यह है कि यह इसके पीछे के तत्वों से पहुंच को रोकती है। मुझे लगता है कि इसके पीछे ओवरले के साथ गैर-मोडल संवाद का उपयोग करने जैसा ही है। ओवरले ने सिर्फ एक मोडल डायलॉग होने की चाल की है (पूरी तरह से इसे पूरी तरह से मॉड्यूल नहीं दिखाया गया है)।

तो यह मेरा समाधान है, इससे पहले कि मैं संवाद शुरू करता हूं, मैं इससे पहले एक div तत्व डालता हूं और ui-widget-overlay कक्षा को div में देता हूं। यह .insertBefore() विधि का उपयोग कर किया गया। और फिर, संवाद पर बंद 'घटना, मैं उस ओवरले div को हटा देता हूं। संवाद 'मोडल' विकल्प पर सेट किया गया है। इस समाधान का उपयोग करके, सीकेएडिटर पॉप अप ठीक काम कर रहा है, क्योंकि वहां केवल एक मोडल डायलॉग (सीकेडिटर पॉप अप) है।

jsfiddle में पूरा कोड यहां दिया गया है। उम्मीद है की यह मदद करेगा।

---

---

मैं एक संवाद प्रदर्शित करने के लिए jQuery का उपयोग कर रहा हूँ। मैंने इस संवाद को मोडल मोड पर सेट किया है। उस संवाद के अंदर मैं एक टेक्स्टरेरा शामिल करता हूं, जिसका उपयोग सीकेएडिटर के साथ किया जाएगा। जब मैं संवाद दिखाता हूं, तो टेक्स्टरेरा को सीकेडिटर द्वारा अच्छी तरह से परिवर्तित किया जाता है। लेकिन जब एक छवि को शामिल करने का प्रयास करें (सीकेएडिटर इनपुट इनपुट के लिए अपने स्वयं के डायलॉग प्रदर्शित करता है), तो मैं यूआरएल इनपुट का उपयोग नहीं कर सकता।

यह संवाद init के लिए मेरे कोड है:

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

कि विन्यास के साथ, मैं पाठ बॉक्स और प्रकार क्लिक नहीं कर सकते।

---

और फिर मैं यह पता लगाने, कि अगर मैं गलत पर मोडल निर्धारित करते हैं, तो यह काम करना चाहिए।

इस कोड है:

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

कि कोड के साथ, सब कुछ सामान्य है, मैं पाठ बॉक्स और प्रकार के लिए क्लिक कर सकते हैं।

---

क्योंकि मैं मोडल मोड सक्षम करने की आवश्यकता है, तो यह मेरी समस्या बन जाते हैं। मुझे ऐसा लगता है क्योंकि jQuery संवाद से जेड-इंडेक्स (या उसके समान) जो CKEditor इनपुट संवाद को अवरुद्ध करता है। क्या कोई मेरी मदद कर सकता है?

Answer 1

हाल ही में, (बस यह पास सप्ताह), मैं एक समान समस्या में चल रहा था। मैं आपके द्वारा प्रदान की गई jsfiddle में जो किया वह ठीक से करने जा रहा था। हालांकि, कुछ शोध के बाद और संवाद यूआई कोड में क्या होता है और पृष्ठ में मार्कअप के साथ क्या चल रहा था, मुझे अंततः समझ में आया कि मुझे क्या करना है।

यह सब के बारे में विजेट कारखाने और _allowInteraction सुविधा नहीं होती।

मेरे लिए मैं एक jQuery संवाद में फिल्टर के साथ सेन्चा ExtJs ग्रिड का उपयोग कर रहा था।ग्रिड ठीक काम करता था, लेकिन फिल्टर, (टेक्स्टबॉक्स फ़िल्टर), बस काम नहीं करेगा। ऐसा इसलिए था क्योंकि जब फ़िल्टर प्रदर्शित होते हैं तो वे संवाद div, या .ui- संवाद टैग के बाहर होते हैं।

यदि आप _ALLowInteraction फ़ंक्शन में संवाद UI कोड में खोदते हैं तो यह निम्न कार्य करता है। बस

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

_allowInteraction आग जब भी फोकस संवाद से खो दिया है के बाद से, मैं:

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

सभी मुझे क्या करना जरूरी था निम्न कोड के साथ मेरी jQuery यूआई फ़ाइल के बाद एक जावास्क्रिप्ट फ़ाइल जोड़ने .x-panel की तलाश करने के लिए आवश्यक: इनपुट, क्योंकि यह घटना से निकाल दिया गया है।

आपके मामले में, तुम सिर्फ देखने के लिए निकटतम तत्व CKEditor के लिए है की आवश्यकता होगी। इस तरह से आप वैकल्पिक हल के किसी भी प्रकार करने की जरूरत नहीं होगी और आप बस सच करने के लिए संवाद के मोडल विकल्प सेट कर सकते हैं। कारण यह नहीं है कि आप ऐसा करना चाहते हैं यदि आप उस पर एक और संवाद प्रदर्शित करना चाहते हैं। आप ओवरले को गलत तत्व या गलत तत्व में शामिल किया जा सकता है। संवाद UI में पहले से ही कोड को संभालने के लिए कोड है।

$ .widget ('ui.dialog', $ .ui.dialog, function() {}); यह हमारी साइट के लिए सभी ui संवाद के लिए आवेदन किया है।

Working jsFiddle Demo

संदर्भ के अंक:

jQuery Dialog UI _allowInteraction

jQuery UI Widget Factory

Answer 2

हाँ, jQueryUI के मोडल jQuery संवाद के बाहर कुछ भी रोक रहा है से बातचीत की जाए। अपने jQuery यूआई संवाद बनाने से पहले इस रजिस्टर:

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

स्रोत: http://bugs.jqueryui.com/ticket/9087#comment:14

Answer 3

एक अधिक आसान समाधान है कि काम करता है के लिए मुझे एक और तो सवाल यह है कि CKE का उल्लेख नहीं करता से लिया जाता है, लेकिन एक मॉडल गैर बनाने के बारे में है मॉडल: https://stackoverflow.com/a/28101676/4050940

बस इस चलाने के बाद मोडल खोला जाता है:

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

और CKEditor संवाद काम करेंगे ठीक