मोडल विंडो के भीतर ट्विटर बूटस्ट्रैप डेटपिकर

Question

मैं वर्तमान में ट्विटर बूटस्ट्रैप फ्रेमवर्क का उपयोग कर रहा हूं, और मोडल विंडो का उपयोग करते समय मुझे जेएस तत्वों को डेटपिकर या सत्यापन जैसे काम करने के लिए नहीं मिल सकता है, हालांकि सही ढंग से चुना गया और समान रूप से प्रस्तुत किया गया। कृपया नीचे मेरी मोडल विंडो देखें:

  <div class="modal hide in" id="newMember" style="display: block; " aria-hidden="false">
        <div class="modal-header">
          <button class="close" data-dismiss="modal" type="button">×</button>
          <h3>New Member Form</h3>
        </div>
        <form accept-charset="UTF-8" action="/players" class="form-horizontal" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="KdL6cc2Vb53qeMY+PpBUS70myT4HX1uWofMUBolLea8="></div>
          <div class="modal-body">
            <div class="widget-content nopadding">
              <div class="control-group">
                <label class="control-label" for="user_role">Role</label>
                <div class="controls">
                  <select id="user_role" name="user[role]" style="display: none; " class="chzn-done"><option value="">Select member role</option>
                  <option value="1">Player</option>
                  <option value="2">Coach</option>
                  <option value="3">Parent</option>
                  <option value="4">Manager</option>
                  <option value="5">Non-player</option></select><div id="user_role_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>Select member role</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_role_chzn_o_0" class="active-result result-selected" style="">Select member role</li><li id="user_role_chzn_o_1" class="active-result" style="">Player</li><li id="user_role_chzn_o_2" class="active-result" style="">Coach</li><li id="user_role_chzn_o_3" class="active-result" style="">Parent</li><li id="user_role_chzn_o_4" class="active-result" style="">Manager</li><li id="user_role_chzn_o_5" class="active-result" style="">Non-player</li></ul></div></div>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_full_name">Full name</label>
                <div class="controls">
                  <input id="user_first_name" name="user[first_name]" placeholder="First Name" size="30" type="text">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_last_name">Last name</label>
                <div class="controls">
                  <input id="user_last_name" name="user[last_name]" placeholder="Last Name" size="30" type="text">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_email">Email</label>
                <div class="controls">
                  <input id="user_email" name="user[email]" placeholder="Email Address" size="30" type="text">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_date_of_birth">Date of birth</label>
                <div class="controls">
                  <input class="datepicker" data-date-format="dd/mm/yyyy" id="user_dob" name="user[dob]" placeholder="dd/mm/yyyy" readonly="readonly" size="30" type="text">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_gender">Gender</label>
                <div class="controls">
                  <select id="user_gender" name="user[gender]" style="display: none; " class="chzn-done"><option value="">Select gender</option>
                  <option value="Male">Male</option>
                  <option value="Female">Female</option></select><div id="user_gender_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>Select gender</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_gender_chzn_o_0" class="active-result result-selected" style="">Select gender</li><li id="user_gender_chzn_o_1" class="active-result" style="">Male</li><li id="user_gender_chzn_o_2" class="active-result" style="">Female</li></ul></div></div>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_team">Team</label>
                <div class="controls">
                  <select id="user_team_id" name="user[team_id]" style="display: none; " class="chzn-done"><option value="">None</option>
                  <option value="4">Metro 3 East</option>
                  <option value="1">State League 3</option>
                  <option value="2">State League 4</option>
                  <option value="3">Metro 3 South</option>
                  <option value="5">Pennant E</option>
                  <option value="6">Under 9 White</option>
                  <option value="7">Under 9 Navy</option>
                  <option value="8">Under 13 Pennant South East</option>
                  <option value="9">Under 17 Pennant South East</option>
                  <option value="10">Under 15 South (1)</option>
                  <option value="11">Under 11 Pennant South East</option>
                  <option value="12">Under 11 South</option></select><div id="user_team_id_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>None</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_team_id_chzn_o_0" class="active-result result-selected" style="">None</li><li id="user_team_id_chzn_o_1" class="active-result" style="">Metro 3 East</li><li id="user_team_id_chzn_o_2" class="active-result" style="">State League 3</li><li id="user_team_id_chzn_o_3" class="active-result" style="">State League 4</li><li id="user_team_id_chzn_o_4" class="active-result" style="">Metro 3 South</li><li id="user_team_id_chzn_o_5" class="active-result" style="">Pennant E</li><li id="user_team_id_chzn_o_6" class="active-result" style="">Under 9 White</li><li id="user_team_id_chzn_o_7" class="active-result" style="">Under 9 Navy</li><li id="user_team_id_chzn_o_8" class="active-result" style="">Under 13 Pennant South East</li><li id="user_team_id_chzn_o_9" class="active-result" style="">Under 17 Pennant South East</li><li id="user_team_id_chzn_o_10" class="active-result" style="">Under 15 South (1)</li><li id="user_team_id_chzn_o_11" class="active-result" style="">Under 11 Pennant South East</li><li id="user_team_id_chzn_o_12" class="active-result" style="">Under 11 South</li></ul></div></div>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_mobile">Mobile</label>
                <div class="controls">
                  <input id="user_mobile" maxlength="10" name="user[mobile]" placeholder="i.e 0421813529" size="10" type="tel">
                  <span class="help-block">
                    <input name="user[private_mobile]" type="hidden" value="0"><div class="checker" id="uniform-user_private_mobile"><span><div class="checker" id="uniform-user_private_mobile"><span><input id="user_private_mobile" name="user[private_mobile]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
                    <a href="javascript:void(0)" class="tip-bottom" data-original-title="Normally, all members of the team can see this information. If you don't want teammates to see this information, just click this checkbox. (Note: Team managers will always see this information.)">Private</a>
                  </span>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_manager_access">Manager access</label>
                <div class="controls">
                  <input name="user[manager]" type="hidden" value="0"><div class="checker" id="uniform-user_manager"><span><div class="checker" id="uniform-user_manager"><span><input id="user_manager" name="user[manager]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_admin_access">Admin access</label>
                <div class="controls">
                  <input name="user[admin]" type="hidden" value="0"><div class="checker" id="uniform-user_admin"><span><div class="checker" id="uniform-user_admin"><span><input id="user_admin" name="user[admin]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class="pull-right">
              <input class="btn btn-primary" name="commit" type="submit" value="Create User">
              <a class="btn btn-danger" data-dismiss="modal" href="#">Cancel</a>
            </div>
          </div>
        </form>
      </div>

Comments

क्या आप अपना कोड jsFiddle में डाल सकते हैं ? इससे लोगों के लिए इसका परीक्षण करना आसान हो जाएगा।

— सारा

इन विभिन्न JQuery प्लगइन्स और जावास्क्रिप्ट फ्रेमवर्क को एक साथ काम करने में कोई समस्या नहीं हुई है: jsfiddle.net/mccannf/xekuW/9

— mccannf

@ सारा यहाँ है jsfiddle jsfiddle.net/h7cMa

— बॉस

@ मेरे मामले में थोड़ा शोध करने के बाद यह प्रतीत होता है कि सीएसएस समस्या का कारण है। जब खिड़की z- इंडेक्स से भरी होती है तो मुझे लगता है कि यह है, टूलटिप्स या डेटपिकर को प्रदर्शित करने की अनुमति नहीं दे रहा है

— बॉस नेस

@ Paul'Whippet'McGuane, मैं आपको अपने बूटस्ट्रैप CSS और JS को देखने की सलाह देता हूं। आपका मॉडल बहुत उच्च z- इंडेक्स मूल्य (99999) पर सेट किया जा रहा है। बस अपने साथ मेरी jsfiddle तुलना करें।

— mccannf

Answer 1

क्लास डेटपिकर में 1051 से ऊपर जेड-इंडेक्स जोड़ें

पेज या सीएसएस में कुछ इस तरह जोड़ें

<style>
.datepicker{z-index:1151 !important;}
</style>

Comments

हालांकि यह काम करता है अगर मैं मोडल बंद कर देता हूं और फिर से खुलता है तो यह एक त्रुटि फेंकता है।

— ज्ञानरंजन

यह लंबे समय से है और मैं इसके बारे में पहले ही भूल चुका हूं। माफ़ करना!

— ज्ञानरंजन २५'१५ को

@Sujaysreedhar सिर्फ सवाल: सूचकांक 1151 क्यों है? मैंने इसे १०००००० में बदल दिया है, फिर भी इसने काम किया लेकिन इस बार जब स्क्रिप्ट चलती है तो यह केवल अतिरिक्त बाएं शीर्ष कोने में

— फैल गया

यह ११५० के ऊपर तब तक मायने नहीं रखता, जब तक कि मोडल विंडो का z- इंडेक्स ११५० है। z- इंडेक्स यह निर्धारित करता है कि जो लेयर शीर्ष पर दिखाना है, जब तक उर केस में १०००००० से ऊपर यह काम करेगा

— सुजय श्रीवास्तव

अगर बूटस्ट्रैप-डेटाइमपिकर का उपयोग किया जाता है। सही चयनकर्ता होता है.ui-datepicker

— jim smith

Answer 2

मेरे लिए यह केवल सीएसएस में महत्वपूर्ण के साथ काम किया

.datepicker {z-index: 1151 !important;}

Comments

यह केवल मेरे साथ काम करता है! महत्वपूर्ण अगर सीएसएस फ़ाइल में जोड़ा जाता है। हालाँकि, यदि आप शैली को सीधे पृष्ठ के सिर में डालते हैं, तो यह जोड़ने के बिना ठीक काम करता है!

— अलसुबली

उत्तम! मैंने इसे datepicker.css में जोड़ा और एक आकर्षण की तरह काम करता है

— javaboygo

Answer 3

मैं उपयोग करता हूं:

body.modal-open .datepicker {
    z-index: 1200 !important;
}

इस तरह: अगर मोडल नहीं खुला है, और आप चाहते हैं कि डेटकपर सामान्य z-index पर हो (मेरे मामले में मुझे मेनू ड्रॉप-डाउन के तहत होना चाहिए, जिसमें 1000 का z-index है), यह काम करता हैं।

यदि मोडल है खुला, datepicker, मोडल z- सूचकांक (1040 या 1050) से अधिक होने का तो उपयोग करने की जरूरत है body.modal-openचयनकर्ता।

मैं बूटस्ट्रैप 3.1.1 का उपयोग कर रहा हूं

Answer 4

Http://www.daterangepicker.com/ (विकल्प) के अनुसार

$('#dispatch_modal').on('shown.bs.modal', function() {
     $('input:text:visible:first').focus();
     // prepare datepicker
     $('.form_datepicker').daterangepicker({
          singleDatePicker: true,
          showDropdowns: true,
          parentEl: '#dispatch_modal'   
     });
});

`

parentEl ने मेरी समस्या हल कर दी ...

Answer 5

कक्षा ui-datepicker में z-indez जोड़ें

<style>
    .ui-datepicker{ z-index:1151 !important; }
</style>

Answer 6

जैसा कि mccannf ने अपनी टिप्पणी में कहा है :

मैं आपको अपने बूटस्ट्रैप CSS और JS को देखने की सलाह देता हूं। आपका मॉडल बहुत उच्च z- इंडेक्स मूल्य (99999) पर सेट किया जा रहा है। बस अपने साथ मेरी jsfiddle तुलना करें

Answer 7

कोड के इस टुकड़े के साथ प्रयास करें।

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

जब आप बूटस्ट्रैप V3 का उपयोग कर रहे हैं तो समस्या का समाधान होगा

Comments

.ui-datepickerमेरे लिए काम किया जहां .datepickerनहीं किया।

— टिम लुडविंस्की

Answer 8

मुझे लगता है कि प्लगइन में तार्किक फ़ंक्शन को बदलना बेहतर है। लगभग 552 पंक्ति में मैंने इसे बदला:

            var zIndex = parseInt(this.element.parents().filter(function(){
                return $(this).css('z-index') !== 'auto';
            }).first().css('z-index'))+10;

इस मामले में:

            var zIndex = parseInt(this.element.parents().filter(function(){
                return $(this).css('z-index') !== 'auto';
            }).first().css('z-index')) + 10 * 1000; //think is enought

Answer 9

मेरे पास यह त्रुटि थी, क्योंकि मैंने नीचे स्क्रॉल किया था। डेटपिकर की नियत में गलत शीर्ष स्थान था। मैं अभी इसका उपयोग करता हूं जैसे:

$('#myModal').on('show.bs.modal', function (e) {
            $(document).scrollTop(0);
});

और अब इसका काम ठीक है।

Comments

इसने मेरे लिए एक अस्थायी समाधान के रूप में काम किया। आपका बहुत बहुत धन्यवाद। लेकिन मैं अपनी डेटपिकर को सही तरीके से दिखाने के लिए एक अंतिम समाधान खोजना चाहता हूं, कोई फर्क नहीं पड़ता कि स्क्रॉल स्थिति क्या है। मैं इसे बाद में खोजने की कोशिश करूंगा। फिर से धन्यवाद!!

— Geziel Carvalho

Answer 10

क्या आप अपनी css फ़ाइल में बदल सकते हैं bootstrap-timepicker/css/bootstrap-timepicker.css

से

.bootstrap-timepicker-widget.dropdown-menu.open {
  display: inline-block;
}

सेवा

.bootstrap-timepicker-widget.dropdown-menu.open {
  display: inline-block;
  z-index:1151;
}

Answer 11

यदि आप बूटस्ट्रैप V3 का उपयोग करते हैं तो यह कोशिश करें।

    .bootstrap-datetimepicker-widget 
    {
        z-index: 1200   !important;
    }

Answer 12

बूटस्ट्रैप 3.x और ऐस टेम्पलेट रैपबूटस्ट्रैप के लिए

एक मोडल के अंदर डेटपिकर और टाइमपिकर

<style>
    body.modal-open .datepicker {
        z-index: 1050 !important;
    }
    body.modal-open .bootstrap-timepicker-widget {
        z-index: 1050 !important;
    }
</style>

Answer 13

$('#effective_to').datepicker({
    dateFormat: "dd-mm-yyyy",
    changeMonth: true,
    changeYear: true,
    beforeShow: function() { 
        $('#ui-datepicker-div').addClass('datepicker');
    }
});

सीएसएस

.datepicker {
    z-index: 100000 !important;
    display: block;
}

यह काम मुझे रूप देता है। हालांकि मैंने मॉडल को अजाक्स के माध्यम से बुलाया था

Answer 14

इस समाधान ने मेरे लिए पूरी तरह से बूटस्ट्रैप मोडल के ऊपर की तारीख को प्रस्तुत करने के लिए काम किया।

http://jsfiddle.net/cmpgtuwy/654/

एचटीएमएल

<br/>
<div class="wrapper">
Some content goes here<br />
Some more content.
<div class="row">
<div class="col-xs-4">

<!-- padding for jsfiddle -->
<div class="input-group date" id="dtp">
<input type="text" class="form-control" />  
<span class="input-group-addon">
  <span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
</div>

जावास्क्रिप्ट

$('#dtp').datetimepicker({
format: 'MMM D, YYYY',
widgetParent: 'body'});


$('#dtp').on('dp.show', function() {
      var datepicker = $('body').find('.bootstrap-datetimepicker-widget:last');
      if (datepicker.hasClass('bottom')) {
        var top = $(this).offset().top + $(this).outerHeight();
        var left = $(this).offset().left;
        datepicker.css({
          'top': top + 'px',
          'bottom': 'auto',
          'left': left + 'px'
        });
      }
      else if (datepicker.hasClass('top')) {
        var top = $(this).offset().top - datepicker.outerHeight();
        var left = $(this).offset().left;
        datepicker.css({
          'top': top + 'px',
          'bottom': 'auto',
          'left': left + 'px'
        });
      }
    });

सीएसएस

.wrapper {
height: 100px;
overflow: auto;}
body {
position: relative;
}

Comments

यह बूटस्ट्रैप-डेटाइमपिकर के लिए है लेकिन फिर भी उपयोगी है।

— बेन ट्रेवर्न

Answer 15

Z- इंडेक्स वैल्यू से कम .modalऔर z- इंडेक्स वैल्यू बदलने की कोशिश करें ।.modal-backdrop.datepicker

Answer 16

BootsTrap के लिए Calender इसका उपयोग करें

/ द कैलंडर इंडेक्स सीएसएस /

.bootstrap-datetimepicker-widget {
   z-index:99999 !important;
}

Answer 17

इस कोड का उपयोग करें जो मेरे लिए काम करता है। वैसे यह इस साइट से आया है https://github.com/eternicode/bootstrap-datepicker/issues/464 ।

$('#datepicker').datepicker().on('show', function () {
                var modal = $('#datepicker').closest('.modal');
                var datePicker = $('body').find('.datepicker');
                if (!modal.length) {
                    $(datePicker).css('z-index', 'auto');
                    return;
                }
                var zIndexModal = $(modal).css('z-index');
                $(datePicker).css('z-index', zIndexModal + 1);
            });

Answer 18

Fwiw। नेकरो लेकिन फिर भी।

के लिये <link href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" rel="stylesheet">

मुझे चाहिए था

<style type="text/css">
.ui-timepicker-container {z-index: 1151 !important;}
</style>    

ओवरराइड को स्वीकार करने के लिए डॉक्टर के सिर में

मैंने उस का सहारा लेने से पहले यहाँ पर हर दूसरे समाधान की कोशिश की।

Answer 19

// re initialze datepicker
$(".bootstrap-datepicker").bsdatepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
}).on('changeDate', function (ev) {
    $(this).bsdatepicker('hide');
});
//
$(".dropdown-menu").css({'z-index':'1100'});

Comments

इस कोड स्निपेट के लिए धन्यवाद, जो कुछ सीमित, तत्काल सहायता प्रदान कर सकता है। एक उचित व्याख्या से यह पता चलता है कि यह समस्या का एक अच्छा समाधान क्यों है, यह दिखा कर इसके दीर्घकालिक मूल्य में बहुत सुधार होगा और यह भविष्य के पाठकों को अन्य, समान प्रश्नों के साथ और अधिक उपयोगी बना देगा। कृपया कुछ स्पष्टीकरण जोड़ने के लिए अपने उत्तर को संपादित करें, जिसमें आपके द्वारा की गई धारणाएँ शामिल हैं।

— मकर

Answer 20

इसे इस्तेमाल करे

#ui-datepicker-div {
  z-index: 100000;
}

Answer 21

मुझे तुम्हारी मदद करने दो,

आप अपने bootstrap.min.css को अपडेट कर सकते हैं

वर्ग ड्रॉपडाउन-मेनू में आप 2000 में जेड-इंडेक्स मान को बदल सकते हैं

इसलिए डेटपिकर दिखाई देगा

Answer 22

अपने डाटापिकर जावास्क्रिप्ट कोड को अंदर लपेटें

function pageLoad() {}