解決方法:一種是設一個很大的數字,另一方式,就是找出目前頁面中z-index 最大的element 然後再設比它大一點。
看起來後者是比較完善的解決方法。要做到此點,請參考下列步驟:
setp 1:
定一義一個 jQuery function 此function 的作用是讓呼叫該function的element z-index 設為目前頁面中z-index最的那個元素再加 10
$.maxZIndex = $.fn.maxZIndex = function(opt) { ////// Returns the max zOrder in the document (no parameter) /// Sets max zOrder by passing a non-zero number /// which gets added to the highest zOrder. /// /// /// inc: increment value, /// group: selector for zIndex elements to find max for /// ///var def = { inc: 10, group: "*" }; $.extend(def, opt); var zmax = 0; $(def.group).each(function() { var cur = parseInt($(this).css('z-index')); zmax = cur > zmax ? cur : zmax; }); if (!this.jquery) return zmax; return this.each(function() { zmax += def.inc; $(this).css("z-index", zmax); }); }
把 datapicker 中的 ,
inst.dpDiv.zIndex($(input).zIndex()+1);行mark 掉, 這一行就是造成 calendar 的z-index 總是在一的原兇(至少在 1.8.12 還是這樣)
step3:
在beforeShow 加上 設定此datepicker 為最大z-index 的設定
jQuery('#txtDate').datepicker({
showButtonPanel: true,
showOn: 'button',
buttonImageOnly: true,
buttonImage: '/wconnect/images/calendar.gif',
beforeShow: function() {$('#ui-datepicker-div').maxZIndex(); },
dateFormat: 'mm/dd/yy' }).attachDatepickerInputKeys();
});
reference :
http://www.west-wind.com/weblog/posts/2009/Sep/12/jQuery-UI-Datepicker-and-zIndex
http://forum.jquery.com/topic/z-index-1-datepicker-1-8
沒有留言:
張貼留言