모달 창 내의 Twitter Bootstrap Datepicker


83

저는 현재 Twitter Bootstrap 프레임 워크를 사용하고 있으며, 모달 창을 사용할 때 js 요소를 통해 datepicker 또는 유효성 검사와 같은 작업을 수행 할 수는 없지만 올바르게 선택되고 균일하게 렌더링됩니다. 아래의 모달 창을 참조하십시오.

  <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>

1
코드를 jsFiddle에 넣을 수 있습니까 ? 사람들이 쉽게 테스트 할 수 있습니다.
Sara

이러한 다양한 JQuery 플러그인과 JavaScript 프레임 워크가 함께 작동하도록하는 데 문제가 없었습니다. jsfiddle.net/mccannf/xekuW/9
mccannf

여기 @Sara는 jsfiddle입니다 jsfiddle.net/h7cMa
보스 나스

@mccannf 내 문제에 대해 약간의 조사를 한 후 CSS가 문제를 일으키는 것으로 보입니다. 창이로드 될 때 내가 생각하는 Z- 색인은 툴팁이나 날짜 선택기가 표시되는 것을 허용하지 않습니다
Boss Nass

1
@ Paul'Whippet'McGuane, 부트 스트랩 CSS와 JS를 살펴 보는 것이 좋습니다. 모달이 매우 높은 Z- 색인 값 (99999)으로 설정되고 있습니다. 위의 jsfiddle을 귀하와 비교하십시오.
mccannf

답변:


243

datepicker 클래스에서 1051 이상의 Z- 색인 추가

페이지 또는 CSS에 이와 같은 것을 추가하십시오.

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

1
그러나 모달을 닫고 다시 열면 오류가 발생합니다.
Jnanaranjan 2014-08-12

오랜만이고 이미 잊었습니다. 죄송합니다!
Jnanaranjan

@Sujaysreedhar 그냥 질문 : 왜 인덱스 1151입니까? 나는 그것을 1000000으로 변경했지만 여전히 작동했지만 이번에는 스크립트가 실행될 때 추가 왼쪽 상단 모서리 만 지불했습니다
smoothumut

모달 창의 Z- 인덱스가 1150이기 때문에 1150 이상이면 문제가되지 않습니다. Z- 인덱스는 위에 표시 할 레이어를 결정하므로 위의 경우 1000000이면 작동합니다
Sujay sreedhar

4
부트 스트랩-datetimepicker.js를 사용하는 경우 올바른 선택입니다.ui-datepicker
짐 스미스

60

나를 위해 그것은 CSS에서 중요합니다!

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

7
css 파일에 추가하면! important와 함께 작동합니다. 그러나 스타일을 페이지 헤드에 직접 넣으면! important를 추가하지 않아도 잘 작동하는 것처럼 보이지만 날짜 선택기가 다른 페이지에서 사용되는 경우에는 좋지 않습니다.
alsobubbly

완전한! 나는 datepicker.css에 추가하고 매력처럼 작동
javaboygo

11

나는 사용한다:

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

이런 식으로 : 모달 열려 있지 않고 날짜 선택기가 일반 Z- 색인에 있도록하려면 (제 경우에는 Z- 색인이 1000 인 메뉴 드롭 다운 아래에 있어야 함), 효과가있다.

모달 열려 있으면 날짜 선택기가 모달 Z- 색인 (1040 또는 1050) 위에 있어야하므로 body.modal-open선택기를 사용하세요 .

Bootstrap 3.1.1을 사용하고 있습니다.


8

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이 내 문제를 해결했습니다 ...


7

ui-datepicker 클래스에 z-indez 추가

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

6

으로 mccannf는 말했다 그의 코멘트 :

부트 스트랩 CSS와 JS를 살펴 보는 것이 좋습니다. 모달이 매우 높은 Z- 색인 값 (99999)으로 설정되고 있습니다. 위의 jsfiddle을 당신의 것과 비교하십시오.


4

이 코드를 사용해보십시오.

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

부트 스트랩 V3를 사용할 때 문제를 해결할 것입니다.


1
.ui-datepicker나를 위해 일 .datepicker하지 않은 곳에서 일했습니다 .
Tim Ludwinski 2016

3

플러그인에서 논리 기능을 변경하는 것이 더 낫다고 생각합니다. 행 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

3

아래로 스크롤했기 때문에이 오류가 발생했습니다. Datepicker가 고정 된 상단 위치가 잘못되었습니다. 이제 다음과 같이 사용합니다.

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

이제 잘 작동합니다.


그것은 일시적인 해결책으로 나를 위해 일했습니다. 대단히 감사합니다. 그러나 스크롤 위치에 관계없이 datepicker가 올바르게 표시되도록 최종 솔루션을 찾고 싶습니다. 나중에 찾아 보겠습니다. 다시 감사합니다!!
Geziel Carvalho

1

당신의 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;
}

1

부트 스트랩 V3를 사용하는 경우 이것을 시도하십시오.


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


1

Bootstrap 3.x 및 Ace 템플릿 wrapbootstrap의 경우

모달 내부의 날짜 선택기 및 시간 선택기

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

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

CSS

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

이것은 나를 형성합니다. 아약스를 통해 모델을 호출했지만


1

이 솔루션은 부트 스트랩 모달 위에 datepicker를 렌더링하는 데 완벽하게 작동했습니다.

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

HTML

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

CSS

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

이것은 bootstrap-datetimepicker 용이지만 여전히 유용합니다.
Ben Trewern


0

BootsTrap Calender의 경우 다음을 사용하십시오.

/ 캘린더 인덱스 CSS /

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

0

이 코드를 사용해보십시오. 그건 그렇고이 사이트 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);
            });

0

Fwiw. Necro하지만 여전히.

...에 대한 <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>    

재정의를 수락하기 위해 문서의 HEAD에

나는 그것에 의지하기 전에 여기에서 다른 모든 해결책을 시도했습니다.


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

2
제한적이고 즉각적인 도움을 제공 할 수있는이 코드 스 니펫에 감사드립니다. 적절한 설명은 크게이 문제에 대한 좋은 해결책이 왜 보여 장기적인 가치를 향상 것이고, 다른 유사한 질문을 미래의 독자들에게 더 유용 할 것입니다. 제발 편집 당신이 만든 가정 등 일부 설명을 추가 할 답변을.
Capricorn


-1

내가 도와 줄게,

bootstrap.min.css를 업데이트 할 수 있습니다.

클래스 드롭 다운 메뉴에서 Z- 색인 값을 2000으로 변경할 수 있습니다.

그래서 datepicker가 나타날 것입니다


-1

데이터 선택기 JavaScript 코드를 내부에 래핑

function pageLoad() {}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.