您的位置：首页 > Web前端 > JQuery

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

2008-10-06 15:18 246 查看

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, 這是一個浮動區塊

$j = jQuery.noConflict();
$j(document).ready(function() {
$j('#floatingBox').bgiframe();
});

以上範例的 HTML 原始碼如下：view plaincopy to clipboardprint?<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>
<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() 這個函數來處理即可！view plaincopy to clipboardprint?$(document).ready(function() { $('#floatingBox').bgiframe(); });
$(document).ready(function() {
$('#floatingBox').bgiframe();
});


搜索更多相關主題的帖子:
jQuery

JavaScript 討論區







UID2 帖子150 精華2 積分137 閱讀權限200 來自Taipei 在線時間158 小時 註冊時間2007-7-14 最後登錄2008-10-6
查看個人網站

查看詳細資料

TOP

wmh


管理員







個人空間
發短消息
加為好友
當前在線

2#
大 中
小 發表於 2008-5-21 13:22 只看該作者

補充

如果有人想知道最後的 HTML 變成怎樣了，請看：view plaincopy to clipboardprint?<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航