分類  >  Web前端 >

不會被上邊select遮擋的日曆控制項 日曆控制項被select遮擋

tags:    時間:2013-12-11 09:50:02
不會被下邊select遮擋的日曆控制項 日曆控制項被select遮擋

關鍵字: 日曆控制項 被select遮擋  不被遮擋

      如果網頁上彈出的日曆控制項和下拉選單重疊時,在IE6會看到下拉選框總是把浮動區塊覆蓋住,無論怎麼調整 z-index 都是沒用的。下面為大家介紹一種不會被下拉選單遮擋的日曆控制項。 (日曆控制項請在下面下載)


一、發生情況:

二、在這種情況下日曆控制項展開式會被下部的  城市 (select類型) 遮擋一部分

效果如下圖:



三、我們需要的最終效果。

日曆控制項用法:

1.引入rl.js

<script src="js/rl.js" language="javascript" type="text/javascript"></script>

 
2.點擊文本框出來日曆選擇層:

日期:<input type="text" id="date" onClick="SelectDate(this.name)" name="date"/>

 

3.控制項引入之後還出現上"圖二"的遮擋效果,解決方法:

雙擊打開rl.js,找到下邊的代碼(將註釋去掉問題解決):

//if(document.all) //{ //document.write('<iframe style="position:absolute;z-index:2000;width:expression(this.previousSibling.offsetWidth);'); //document.write('height:expression(this.previousSibling.offsetHeight);'); //document.write('left:expression(this.previousSibling.offsetLeft);top:expression(this.previousSibling.offsetTop);'); //document.write('display:expression(this.previousSibling.style.display);" scrolling="no" frameborder="no"></iframe>'); //} 

 
再去看看你的頁面是不是問題解決了。

清風夜影寒:http://qfyyh.iteye.com

 

1 樓 liuyupy 2011-06-01  
IE6 ?  select&index BUG?   加入空的IFRAME
2 樓 清風夜影寒 2011-06-01  
liuyupy 寫道
IE6 ?  select&index BUG?   加入空的IFRAME

加入和層一樣大的iframe,跟層一起顯隱
3 樓 vb2005xu 2011-06-01  
 this.divWrapper = document.createElement('div'); 	this.divWrapper.style['position'] = 'absolute'; 	this.divWrapper.style['display'] = 'none'; 	this.divWrapper.style['zIndex'] = '100'; 	this.divWrapper.style['left'] = '0px'; 	this.divWrapper.style['top'] = '0px';  this.template = '<div style="position:absolute;z-index: 101">' + 		'<a href="@{target-url}" target="_blank">' + 		'<img src="@{img-url}" border="0" width="@{width}" height="@{height}"/>' + 		'</a>' + 		'</div>' + 		'<iframe style="position:absolute;width:100%;height:100%;background:#fff;border:0;z-index: 100"></iframe>' + 		'<div style="position:absolute;z-index: 100"></div>';    compile: function(){ 		this.template = this.template.replace(/@{target-url}/g,this.target) 			.replace(/@{img-url}/g,this.img.src) 			.replace(/@{width}/g,this.img.width) 			.replace(/@{height}/g,this.img.height); 	} , //	 	init: function(){ 		this.compile(); 		 		this.divWrapper.id = this.id; 		this.divWrapper.style['width'] = this.img.width + 'px'; 		this.divWrapper.style['height'] = this.img.height + 'px'; 		this.divWrapper.innerHTML = this.template; 		 		//將div追加到body後面 		var body = document.getElementsByTagName('body')[0];		 		body.appendChild(this.divWrapper); 	} ,  


推薦閱讀文章

Bookmark the permalink ,來源:互聯網