引导日期选择器未在自定义灯箱中打开

Question

我有一个自定义灯箱，并尝试在灯箱区域内运行引导日期选择器，但日期选择器显示在灯箱后面，有人可以建议解决这个问题吗？

这里是JSfiddle demo

$(document).ready(function() {
    //open lightbox
    $(".ajaxLightbox").click(function() {
        $(".ajaxLightboxWrapper").fadeIn();
    });
    //close lightbox
	$(".ajaxLightBoxClose, .ajaxLightboxLayer").click(function() {
        $(".ajaxLightboxWrapper").fadeOut();
    });
	//open datepicker
    $('#counselling-datepicker-lightbox').datepicker({
        autoclose: true
    });
});

.ajaxLightboxWrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 99999;
}
.ajaxLightboxContent {
  position: absolute;
  left: 0;
  right: 0;
  margin: -250px auto 0 auto;
  top: 50%;
  max-width: 600px;
  height: 500px;
  background-color: #ffffff;
  z-index: 2;
  padding: 10px;
  box-sizing: border-box;
}
.ajaxLightboxInner {
  position: relative;
  width: 100%;
  height: 100%;
  float: left;
}
.ajaxLightboxLayer {
  background: rgba(0, 0, 0, 0.6);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.ajaxLightBoxClose {
  font-family: arial;
  font-size: 22px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 30px;
  cursor: pointer;
  z-index: 2;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<p><a href="#" class="ajaxLightbox">Datepicker in lightbox</a></p>
<div class="ajaxLightboxWrapper">
  <div class="ajaxLightboxContent">
    <div class="ajaxLightBoxClose">X</div>
    <div class="ajaxLightboxInner" style="position:relative;"> 
    	<input type="text" id="counselling-datepicker-lightbox" style="border:1px solid #000; padding:5px;">
     </div>
  </div>
  <div class="ajaxLightboxLayer"></div>
</div>

Answer 1

您需要提供适当的容器才能在您的自定义模态框中正确呈现它。 我将 ID 提供给您的 ajaxLightboxInner 并将其指定为日期输入文本框中的容器。 data-date-container='#ajaxLightboxInner'

<p><a href="javascript:void(0);" class="ajaxLightbox">Datepicker in lightbox</a></p>
<div class="ajaxLightboxWrapper" id="mymodal">
  <div class="ajaxLightboxContent">
    <div class="ajaxLightBoxClose">X</div>
    <div class="ajaxLightboxInner" id="ajaxLightboxInner"> 
        <input type="text" id="counselling-datepicker-lightbox" data-date-container='#ajaxLightboxInner'>

     </div>
  </div>
  <div class="ajaxLightboxLayer">


  </div>
</div>


$(document).ready(function() {
    //open lightbox
    $(".ajaxLightbox").click(function() {
        $(".ajaxLightboxWrapper").fadeIn();
        $('#counselling-datepicker-lightbox').datepicker({
        autoclose: true
    });
    });
    //close lightbox
    $(".ajaxLightBoxClose, .ajaxLightboxLayer").click(function() {
        $(".ajaxLightboxWrapper").fadeOut();
    });
    //open datepicker

  $("#btn").click(function(){


  });

});

Link to updated Fiddle

Answer 2

KD 有更好的解决方法。但是，如果您想坚持使用您的代码。你必须玩 z-index。或者您也可以自定义 Bootstrap Datepicker CSS 以供您自己自定义使用。

你需要的东西我已经得到了请看这个 https://jsfiddle.net/Lrt54jg4/19/

    <p><a href="#" class="ajaxLightbox" style="z-index:-1;">Datepicker in lightbox</a></p>
<div class="ajaxLightboxWrapper" style="z-index:-1;">
  <div class="ajaxLightboxContent">
    <div class="ajaxLightBoxClose">X</div>
    <div class="ajaxLightboxInner" style="position:relative;"> 
        <input type="text" id="counselling-datepicker-lightbox" style="border:1px solid #000; padding:5px;">
     </div>
  </div>
  <div class="ajaxLightboxLayer"></div>
</div>

但我建议自定义 datepicker css，因为它会给你更多的控制权。

Answer 3

您需要包含 Bootstrap css 参考

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css

试试this