Question

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

＆＃13;

$(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
    });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

您需要提供适当的容器才能在自定义模式框中正确呈现它。我为您的 ajaxLightboxInner 提供了ID，并在日期输入文本框中将其指定为容器。 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

K D有更好的解决方案。但是如果你想坚持你的代码那么。你必须使用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

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

3 个答案: