बूटस्ट्रैप ट्विटर डेटपिकर + मोडल - मॉड्यूल स्क्रीन के बजाय पेरेंट स्क्रीन में कैलेंडर आ रहा है

Question

मेरे पास एक फॉर्म (Payment.php) है जो मैं ट्विटर बूटस्ट्रैप का उपयोग कर एक मोडल स्क्रीन में प्रदर्शित कर रहा हूं। इस रूप में मेरे पास एक दिनांक फ़ील्ड है जिसके लिए मुझे this बूटस्ट्रैप प्लगइन मिला।

लेकिन समस्या यह है कि कैलेंडर पेरेंट स्क्रीन (Index.php) में लोड किया गया है और मॉडल रूप पर नहीं जहां वास्तव में इसकी आवश्यकता है।

क्या कोई इसका समाधान सुझा सकता है।

निम्नलिखित कोड है जो मैंने कोशिश की है।

आयात:

<link href="css/bootstrap.css" rel="stylesheet"> 
<link href="css/datepicker.css" rel="stylesheet"> 
<script src="js/bootstrap-datepicker.js"></script> 
<script type="text/javascript" src="js/bootstrap.js"></script> 
<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 

पीएचपी:

<div class="controls"> 
     <input data-datepicker="datepicker" class="span3" value="2012-09-13" data-date-format="yyyy-mm-dd" id="dp2" > 
     </div> 

जे एस:

$('#dp2').datepicker(); 

Answer 1

वर्ग .datepicker और बनाने के लिए z- सूचकांक जोड़े .modal की तुलना में अधिक

.datepicker { 
z-index: 9999; 
top: 0; 
left: 0; 
padding: 4px; 
margin-top: 1px; 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
} 

Answer 2

कई परीक्षणों के बाद, मैं @ m4k के उत्तर में मेरी टिप्पणी फिर से पुष्टि कर सकता हूं: सीएसएस फ़ाइल के माध्यम से जेड-इंडेक्स समाधान ओएस एक्स पर फ़ायरफ़ॉक्स 1 9 और 20 पर काम नहीं करता है। क्रोम हालांकि काम करता है। मैंने इसे अन्य ब्राउज़रों या ओएस पर और परीक्षण नहीं किया।

समाधान जो मेरे लिए काम करता है, जैसा कि नीचे दिखाया jQuery-ui के datepicker config के माध्यम से z- सूचकांक स्थापित करने के लिए है:

$('#datepicker').datepicker({ 
    beforeShow: function() { $('#datepicker').css("z-index", 1051); } 
}); 

जहां z- सूचकांक मोडल से एक के रूप अधिक होना चाहिए (बूटस्ट्रैप 2.3 में, मोडल में 1050 है)।

beforeShow में एक विधि को कॉल करने के लिए एक और भी उन्नत समाधान हो सकता है जो वर्तमान में पृष्ठ पर वर्तमान में उच्चतम जेड-इंडेक्स निर्धारित करता है। http://www.west-wind.com/weblog/posts/2009/Sep/12/jQuery-UI-Datepicker-and-zIndex पर आपको एक उदाहरण मिलता है।

---

अद्यतन: स्वचालित रूप से मॉडल की तुलना में z- सूचकांक 1 उच्च सेट

आसान नमूना निर्धारित करने के लिए कैसे क्या z- सूचकांक अंतर्निहित मोडल की है:

$("#datepicker").closest(".modal").css("z-index") 

इस प्रकार , beforeShow विधि

$('#datepicker').datepicker({ 
    beforeShow: function() { 
     var $datePicker = $("#datepicker"); 
     var zIndexModal = $datePicker.closest(".modal").css("z-index"); 
     $datePicker.css("z-index", zIndexModal + 1); 
    } 
}); 

Answer 3

.. इनमें से कोई भी मेरे लिए काम नहीं किया। मैं बूटस्ट्रैप 2.3.2 चला रहा हूं, और इससे कोई फर्क नहीं पड़ता कि मैं जावास्क्रिप्ट के माध्यम से कैसे प्रयास करता हूं, बूटस्ट्रैप की जावास्क्रिप्ट हमेशा डेटपिकर के जेड-इंडेक्स को मेरे मामले में रीसेट कर देगा (मेरे मामले में) 21. निश्चित रूप से, जावास्क्रिप्ट में ऐसा करने का एक तरीका है, लेकिन मुझे सीएसएस रास्ता काफी साफ लगता है।

/* otherwise datepickers won't show in a modal dialog */ 
.datepicker { 
    z-index:1051 !important; 
} 

Answer 4

मैं एक प्रदर्शन के लिए इस्तेमाल किया:

तो, यह चाल किया कोई नहीं; .datepicker के लिए सीएसएस फ़ाइल में विशेषता। और यह ठीक काम किया।

Answer 5

मैंने पहले शो दृष्टिकोण का पालन किया, लेकिन जेड-इंडेक्स गणना के लिए इनपुट से निकटतम मोडल प्राप्त करना पड़ा, और उसके बाद कैलेंडर को अलग-अलग div पर जेड-इंडेक्स सेट करना सुनिश्चित करें। अगर मैं आपकी समस्या को हल

var DEFAULT_Z_INDEX = 10; 

$('#my-date-input') 
    .datepicker() 
    .on('show', function() { 

     // Make sure that z-index is above any open modal. 
     var $input= $(this); 
     var modalZIndex = $input.closest('.modal').css('z-index'); 
     var zIndex = DEFAULT_Z_INDEX; 
     if (modalZIndex) { 
      zIndex = parseInt(modalZIndex) + 1; 
     } 

     $('.datepicker').css("z-index", zIndex); 
    }); 

Answer 6

एचटीएमएल

<!-- Text input--> 
<div class="form-group"> 
    <label class="col-sm-2 control-label" for="textinput">Date TO</label> 
    <div class="col-sm-10"> 
     <input type="text" id="DateToP" name="DateToP" placeholder="Post Code" class="form-control datepicker"> 
    </div> 
</div> 

सीएसएस

<style type="text/css"> 
.datepicker { 
    z-index:1051 !important; 
    } 
</style> 

jQuery

$('#DateToP').datepicker({ 
     format: 'yyyy-mm-dd', 
     autoclose: true 
    });