[jQuery] bgiframe Plugin - 輕鬆解決 IE6 z-index 的問題 jQuery

wmh

jQuery bgiframe Plugin
http://blog.brandonaaron.net/tag/bgiframe/
一個步驟輕鬆解決 IE6 z-index 的問題

如果網頁上有浮動區塊和下拉選單重疊時，在 IE6 會看到下拉選單總是把浮動區塊蓋住，無論怎麼調整 z-index 都是沒用的，像是這樣(若您不是使用 IE6 瀏覽本頁，則應該看到的是正常的浮動區塊在上面)：


This is a test!

歡迎來到 jsgears.com, 這是一個浮動區塊

所幸 jQuery 有方便的 plugin 可以處理這個問題，就是 bgiframe plugin。bgiframe 會在區塊的下面再插入一段 iframe，這樣就可以把下拉選單遮住，並且讓浮動區塊正常顯示。效果如下：


This is a test!

歡迎來到 jsgears.com, 這是一個浮動區塊

以上範例的 HTML 原始碼如下：

<select style="z-index: 1;">
  <option>This is a test!</option>
</select>
<div id="floatingBox" style="width: 100px; height: 50px; border: solid 1px red; z-index: 2; background-color: lightyellow; position: relative; top: -35px; left: 40px;">歡迎來到 jsgears.com, 這是一個浮動區塊</div>
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.bgiframe.pack.js"></script>

除了記得引用 jquery 和 bgiframe 之外，JavaScript 的原始碼也相當簡單，只要先選出你要加入 iframe 的區塊後，再用 bgiframe() 這個函數來處理即可！

$(document).ready(function() {
  $('#floatingBox').bgiframe();
});

wmh

如果有人想知道最後的 HTML 變成怎樣了，請看：

<SELECT style="Z-INDEX: 1"> 
  <OPTION selected>This is a test!</OPTION>
</SELECT> 
<DIV id=floatingBox style="BORDER: red 1px solid; WIDTH: 100px; POSITION: relative; TOP: -35px; HEIGHT: 50px; BACKGROUND-COLOR: lightyellow">
<IFRAME class=bgiframe style="DISPLAY: block; Z-INDEX: -1; FILTER: Alpha(Opacity='0'); LEFT: -1px; ; LEFT: expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+'px'); WIDTH: 102px; ; WIDTH: expression(this.parentNode.offsetWidth+'px'); POSITION: absolute; TOP: -1px; ; TOP: expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+'px'); HEIGHT: 80px; ; HEIGHT: expression(this.parentNode.offsetHeight+'px')" 
tabIndex=-1 src="javascript:false;" frameBorder=0></IFRAME>
歡迎來到 jsgears.com, 這是一個浮動區塊
</DIV>