解決下拉式選單覆蓋圖層的問題
發表於 : 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"> <!-- #container { position: relative; left: 50%; margin-left: -300px; width: 600px; } --> </style> <script type="text/javascript"> <!-- function showDiv(sDivID, bState) { var oDiv = document.getElementById(sDivID); /*@cc_on @if (@_jscript_version >= 5) try { var oIframe = document.getElementById('HelpFrame'); oIframe.scrolling = 'no'; } catch (e) { var oIframe = document.createElement('iframe'); var oParent = oDiv.parentNode; oIframe.id = 'HelpFrame'; oParent.appendChild(oIframe); } oIframe.frameborder = 0; oIframe.style.position = 'absolute'; oIframe.style.top = 0; oIframe.style.left = 0; oIframe.style.display = 'none'; @end @*/ if (bState) { oDiv.style.display = 'block'; /*@cc_on @if (@_jscript_version >= 5) oIframe.style.top = oDiv.style.top; oIframe.style.left = oDiv.style.left; oIframe.style.zIndex = oDiv.style.zIndex - 1; oIframe.style.width = parseInt(oDiv.offsetWidth); oIframe.style.height = parseInt(oDiv.offsetHeight); oIframe.style.display = 'block'; @end @*/ } else { /*@cc_on @if (@_jscript_version >= 5) oIframe.style.display = 'none'; @end @*/ oDiv.style.display = 'none'; } } //--> </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則不會有問題
最近遇到的一個問題： 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"> <!-- #container { position: relative; left: 50%; margin-left: -300px; width: 600px; } --> </style> <script type="text/javascript"> <!-- function showDiv(sDivID, bState) { var oDiv = document.getElementById(sDivID); /*@cc_on @if (@_jscript_version >= 5) try { var oIframe = document.getElementById('HelpFrame'); oIframe.scrolling = 'no'; } catch (e) { var oIframe = document.createElement('iframe'); var oParent = oDiv.parentNode; oIframe.id = 'HelpFrame'; oParent.appendChild(oIframe); } oIframe.frameborder = 0; oIframe.style.position = 'absolute'; oIframe.style.top = 0; oIframe.style.left = 0; oIframe.style.display = 'none'; @end @*/ if (bState) { oDiv.style.display = 'block'; /*@cc_on @if (@_jscript_version >= 5) oIframe.style.top = oDiv.style.top; oIframe.style.left = oDiv.style.left; oIframe.style.zIndex = oDiv.style.zIndex - 1; oIframe.style.width = parseInt(oDiv.offsetWidth); oIframe.style.height = parseInt(oDiv.offsetHeight); oIframe.style.display = 'block'; @end @*/ } else { /*@cc_on @if (@_jscript_version >= 5) oIframe.style.display = 'none'; @end @*/ oDiv.style.display = 'none'; } } //--> </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則不會有問題