我正在使用 jQuery UI 1.12.0 的日期选择器组件。我想在有人点击文本框并且日期选择器显示完毕后更改 z-index
。
我尝试添加以下内容,但真的不明白 _updateDatepicker_original
和 _updateDatepicker
是什么:
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
$.datepicker._updateDatepicker_original(inst);
var afterShow = this._get(inst, 'afterShow');
if (afterShow)
afterShow.apply((inst.input ? inst.input[0] : null));
}
我这样调用它:
$('.AddDatePicker').datepicker({
afterShow: function () {
$('.ui-datepicker').css('z-index', '1000001');
}
});
但是,在我更改月份之前,z-index
不会更改。
最佳答案
您可以使用 css 而无需使用 javascript
.ui-datepicker.ui-widget {
z-index: 3 !important;
}
另一种选择是使用 beforeShow
回调来将特定类添加到日期选择器:
$(function() {
$('.AddDatePicker').datepicker({
beforeShow: function(el, inst) {
inst.dpDiv.addClass('zin')
}
});
});
.itw {
z-index: 2;
display: block;
background-color: black;
position: absolute;
}
.zin {
z-index: 3 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<input type="text" id="dtp" class="AddDatePicker" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<input type="text" id="intheway" class="itw" />
关于javascript - jQuery 日期选择器上的 afterShow 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44013512/