jquery-ui डेटपिकर परिवर्तन जेड-इंडेक्स

Question

समस्या बहुत सीधी आगे है हालांकि मुझे यह हल करने में मुश्किल हो रही है कि इसे कैसे हल किया जाए।

मैं एक कस्टम-आईओएस शैली चालू/बंद टॉगल के साथ एक jQuery-ui डेटपिकर का उपयोग कर रहा हूं। यह टॉगल कुछ बिल्कुल स्थित तत्वों का उपयोग करता है जो वर्तमान में मेरे दिनांक पिकर के शीर्ष पर दिखाई दे रहे हैं।

बदसूरत चक्र जुलाई 6 वीं से नीचे को कवर लेकिन देखना ...

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

मैं पहले से ही

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100}); 

और

$('.date_field').datepicker({ 
    beforeShow: function(input, inst) { 
     inst.dpDiv.css({"z-index":100}); 
    } 
}); 

की कोशिश की है, लेकिन यह z- सूचकांक हर बार datepicker शुरू की है ओवरराइट लगता है।

किसी भी मदद की सराहना की जाती है!

Answer 1

प्रश्न में आपका जेएस कोड काम नहीं करता है क्योंकि jQuery जब भी आप इसे कॉल करते हैं तो डेटपिकर विजेट की style विशेषता को रीसेट करता है।

ओवरराइड करने के लिए अपने style के z-index एक !important सीएसएस नियम के रूप में पहले से ही another answer में उल्लेख के साथ है एक आसान तरीका है। फिर भी एक और answer इनपुट तत्व पर position: relative; और z-index सेट करने का सुझाव देता है जो स्वचालित रूप से डेटपिकर विजेट पर कॉपी हो जाएगा।

लेकिन, जैसा कि अनुरोध किया है, अगर किसी भी कारण से आप वास्तव में यह गतिशील स्थापित करने के लिए, अपने पृष्ठ के लिए अधिक अनावश्यक कोड और प्रसंस्करण जोड़ने की जरूरत है, तो आप इस कोशिश कर सकते हैं:

$('.date_field').datepicker({ 
    //comment the beforeShow handler if you want to see the ugly overlay 
    beforeShow: function() { 
     setTimeout(function(){ 
      $('.ui-datepicker').css('z-index', 99999999999999); 
     }, 0); 
    } 
}); 

Fiddle

मैं विजेट के z-index को सेट करने के लिए एक स्थगित फ़ंक्शन ऑब्जेक्ट बनाया है, जब भी इसे jQuery UI द्वारा रीसेट किया जाता है, हर बार जब आप इसे कॉल करते हैं। यह आपकी जरूरतों को पूरा करना चाहिए।

सीएसएस हैक बहुत कम बदसूरत आईएमओ है, मैं केवल अपने यूएसएस में jQuery यूआई tweaks के लिए एक जगह आरक्षित (यह मेरे पृष्ठों में आईई 6 tweaks से ऊपर है)।

Answer 2

ऐसा करने का एक और शानदार तरीका है। इस सीएसएस जोड़ें:

.date_field {position: relative; z-index:100;} 

jQuery कैलेंडर के z-index 101 (इसी तत्व एक से अधिक) स्थापित करेगा। position फ़ील्ड absolute, relative या fixed होना चाहिए। jQuery पहला तत्व के माता-पिता, जो निरपेक्ष/सापेक्ष/तय है की खोज करता है, और इसके 'z-index

Answer 3

datepicker अब पॉपअप z- सूचकांक उसके संबंधित क्षेत्र एक से अधिक करने के लिए, सेट के सामने इसे रखने के लिए ले जाता है वह फ़ील्ड, भले ही वह फ़ील्ड स्वयं पॉपअप संवाद में हो। डिफ़ॉल्ट रूप से जेड-इंडेक्स 0 है, इसलिए डेटपिकर 1 के साथ समाप्त होता है।क्या कोई ऐसा मामला है जहां यह डेटपिकर को सही तरीके से नहीं दिखा रहा है? JQuery Forum Post

100. की एक z- सूचकांक प्राप्त करने के लिए आप z-index:99; साथ एक इनपुट की जरूरत है और jQueryUI datepicker अद्यतन करेगा होने की z-index:100

<input style="z-index:99;"> या <input class="high-z-index"> और सीएसएस .high-z-index { z-index: 99; }

आप यह भी निर्दिष्ट कर सकते हैं जेड-इंडेक्स को प्राप्त करने के लिए जो आपके डायलॉग बॉक्स से प्राप्त होना चाहिए और jQueryUI को Z-index का सही ढंग से पता लगाने का कारण बनता है।

<input style="z-index:inherit;"> या <input class="inhert-z-index"> और सीएसएस .inherit-z-index { z-index: inherit; }

Answer 4

आप !important खंड का उपयोग करने के सीएसएस का उपयोग कर इन-लाइन z-index मूल्य के लिए मजबूर करने की जरूरत है।

.ui-datepicker{z-index: 99 !important}; 

Answer 5

यह मेरे लिए काम किया जब मैं एक बूटस्ट्रैप मोडल के साथ संयोजन के रूप में उपयोग करने के लिए कोशिश कर रहा था datepicker:

$('input[id^="txtDate"]').datepicker(); 
$('input[id^="txtDate"]').on('focus', function (e) { 
    e.preventDefault(); 
    $(this).datepicker('show'); 
    $(this).datepicker('widget').css('z-index', 1051); 
}); 

बेशक

चयनकर्ता बदल अपनी खुद की जरूरत फिट करने के लिए,। मैंने "जेड-इंडेक्स" को 1051 पर सेट किया क्योंकि बूटस्ट्रैप मोडल के लिए जेड-इंडेक्स 1050 पर सेट किया गया था।

Answer 6

सर्वश्रेष्ठ प्राकृतिक तरीका केवल "प्लेटफॉर्म" पर डेट-पिकर तत्व डालना है जिसमें " रिश्तेदार "स्थिति और आपके नियंत्रण से ऊपर दिखाई देने वाले तत्व की तुलना में उच्च" z-index "है ...