bootstrap twitter datepicker + modal - 在父屏幕而不是模态屏幕中出现的日历

Question

我有一个form(Payment.php),我使用twitter bootstrap在模态屏幕中显示.在表单中,我有一个日期字段,我找到了这个引导程序插件.

但问题是日历是在父屏幕(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>

PHP:

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

JS:

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

Answer 1

将z-index添加到.datepicker类,并使其超过.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答案的评论:通过CSS文件的z-index解决方案在OS X上的Firefox 19和20上不起作用.虽然Chrome可以工作.我没有在其他浏览器或操作系统上进一步测试它.

适用于我的解决方案是通过jquery-ui的datepicker配置设置z-index,如下所示:

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

其中z-index应该高于模态之一(在bootstrap 2.3中,模态有1050).

一个更高级的解决方案可能是调用一个方法beforeShow,自动确定页面上当前最高的z-index.在http://www.west-wind.com/weblog/posts/2009/Sep/12/jQuery-UI-Datepicker-and-zIndex上,您可以找到一个示例.

更新:自动将z-index 1设置为高于模态

简单的示例如何确定基础模态的z-index是什么:

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