解決下拉式選單覆蓋圖層的問題

文章由 **yehlu** » 2005-09-27 11:56:29

http://blog.yam.com/jaceju/archives/137542.html

最近遇到的一個問題： IE 上能否解決 <DIV>圖層被 <SELECT>下拉式選單遮住的問題？如下圖：

我透過 Google 大神，找到了下面這篇文章，它解決了這個問題：

Sample for using a DIV IFRAME shim to cover over SELECT Boxes and other windowed controls in IE.

在 IE 上，<SELECT> 標籤屬於視窗化控制元件，因此會蓋在所有圖層的上方。解決的方式是用一個空的 <IFRAME> 標籤，在圖層出現前，先壓在 <SELECT> 的上方，然後再將圖層疊上去。

(註：在這篇文章之前有一篇「 How to cover an IE windowed control (Select Box, ActiveX Object, etc.) with a DHTML layer」，不過這篇文章因為被 Spam Attack ，所以會造成瀏覽器無法回應，只能用 Opera 開啟。)

總結了裡面的討論，我參考原作者的 JavaScript ，改良出一個通用的 function 。裡面用到了一些特殊的功能，讓 IE 以外的瀏覽器不透過 <IFRAME> 的協助，因為它們並不會有類似的問題。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body> <div id="container"> <form> <select> <option>A Select Box is Born ....</option> </select> </form> <br /> <br /> <a href="#" onclick="showDiv('PopupDiv', true); return false;">Click to show DIV.</a> <br /> <br /> <a href="#" onclick="showDiv('PopupDiv', false); return false;">Click to hide DIV.</a> <div id="PopupDiv" style="position:absolute; top:10px; left:50px; height: 40px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100;"> .... and a DIV can cover it up<br /> through the help of an IFRAME. </div> </div> </body> </html>

執行結果：

有興趣的朋友請自行研究，有使用上的問題也歡迎告知。

補述：如果在 Dreamweaver 已用內建的圖層隱藏功能的話，直接把 showDiv 函式加在後面即可。例如：
onmouseover="MM_showHideLayers('Layer1','','show'); showDiv('Layer1', true);" onmouseout="MM_showHideLayers('Layer1','','hide'); showDiv('Layer1', false);"

Posted by jaceju at 00:09 回應(4) 引用(0)
回blog首頁上一篇下一篇
New DHTML rollover menus
Cross-Browser, Powerful, Easy to
Use, Affordable Menu Builder!
Free HTML and XML Tools
Visually Convert HTML to XHTML
Easy to Use, Download Now!
Ads by Gooooogle
引用URL
http://cgi.blog.yam.com/trackback/137542
回應文章
Hi,

之前也在一篇文章看過這類的討論~
不過解法不太一樣，參考看看 ^^

Form Elements Overlapping A Styled Layer
http://www.webreference.com/programming ... index.html
Posted by chihwen at 2005年05月22日 01:08
嗯，不過它的解決方案是把 SELECT 藏起來，這個對我們家那些「非常要求」的企劃來說，接受程度不是很高呢。

您可以看看我上面的例子，它是「疊」在 SELECT 上面，也不需要特別去找出哪個 SELECT (或其他的視窗化元素，例如 APPLET ) 應該要被隱藏。

因此我個人認為，上面的解法是我目前找到最佳的一種。

供您參考 ^^
Posted by jaceju at 2005年05月22日 17:02
另一種利用上面介紹的解法，所呈現出來的 CSS 選單：
http://homepage.mac.com/igstudio/design ... frame.html
Posted by jaceju at 2005年05月23日 13:00
很棒的解法，真是謝謝你，但我在使用上發現了一個小問題就是若div 的top 跟 left 若套用的 css 的 class 則iframe 便找不到 div 的 top 跟 left ，就會發生一點問題，直接用style，指定 top 及 left則不會有問題