做网页甘特图的时候,由于任务进度要选择时间,用到了jscalendar-1.0这个日期控件,但是显示有问题,日期选择框不是放在最外层,鼠标一点击,选择框就消失了,导致无法选择日期,让我一度以为是自己代码问题,如下所示:
IE9浏览器下,如下图所示
谷歌浏览器下,如下图所示
结果导致无法选择日期,解决方法就是改下Calendar.prototype.create这个方法中的代码,在这个方法中,增加一句:div.style.zIndex = 10000;
就是下段代码中的第27行
代码如下
Calendar.prototype.create = function (_par) {
var parent = null;
if (! _par) {
// default parent is the document body, in which case we create
// a popup calendar.
parent = document.getElementsByTagName("body")[0];
this.isPopup = true;
} else {
parent = _par;
this.isPopup = false;
}
this.date = this.dateStr ? new Date(this.dateStr) : new Date();
var table = Calendar.createElement("table");
this.table = table;
table.cellSpacing = 0;
table.cellPadding = 0;
table.calendar = this;
Calendar.addEvent(table, "mousedown", Calendar.tableMouseDown);
var div = Calendar.createElement("div");
this.element = div;
div.className = "calendar";
if (this.isPopup) {
div.style.position = "absolute";
div.style.display = "none";
div.style.zIndex = 10000;
}
div.appendChild(table);
第27行代码为新增加的,增加这一行代码就能够让日期选择框正常显示,如下图所示
上网查了下
zIndex 属性设置元素的堆叠顺序。
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
语法:
Object.style.zIndex=auto|number