IE6情况下,如果网页上下拉选单重叠时,会看到下拉选框总是把浮动区块div覆盖住,bgiframe 插件解决IE6 的这个
bug.
首先去jquery 官方网下载 jquery.bgiframe.js ,然后在jsp页面引入 <script type="text/javascript" src="scripts/jquery.bgiframe.js"></script>
或者<script type='text/javascript' src='<%= request.getContextPath()%>/scripts/jquery.bgiframe.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#dialog').bgiframe(); //dialog是浮动区块div的id.
});
</SCRIPT>
或者
<script type="text/javascript">
$(function() {
$('#dialog'').bgiframe();
});
</SCRIPT>
*******************************************************
使用的是Jquery UI dialog的时候,可以利用UI dialog的属性达到这个目的。(这个方法更简单)
$(document).ready(function(){
$('#dialog').dialog({
autoOpen: false,
height:600,
width: 900,
bgiframe: true , //解决下拉框遮盖div的bug
resizable: false, //dialog的大小不可以改变
draggable:false //dialog不可以拖动
});
});
*******************************************************
在IE6下,当div下方有下拉列表框select元素的时候,下拉列表框会划破div显示在div之上,不论z-index设为何值均会出现此问题,可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑,div 无法覆盖select,但是iframe 可以覆盖select,而div可以覆盖iframe,所以解决办法就是用Z轴高度更高的Iframe元素,包裹或覆盖住下拉列表框控件,使其回到正常的Z轴高度上来!
解决办法一:Iframe包裹select元素
<iframe style="z-index:1" style="z-index:1"><!-- 用iframe 解决此bug -->
<select name="country">
<option value="1">china</option>
<option value="2">japanese</option>
<option value="1">U.S.A</option>
</select>
</iframe>
解决办法二:以Iframe作为div的子元素,覆盖select元素
.T_iframe
{
position: absolute;/*绝对定位保证iframe不会占用流布局空间*/
width: 100%; /*100%保证可以覆盖整个div*/
height: 100%;
z-index:-1; /*-1保证iframe显示在div下方*/
}
.T_div
{
position: absolute;
left:100px;
top:50px;
width: 300px;
height: 200px;
background : blue;
z-index:100;
}
<div class="T_div">
<span>这里可以包含其他dom元素</span>
<iframe class="T_iframe"></iframe>
</div>
这样嵌入了iframe的div就不怕被select划破了,方法一使用比较简单,但是应用存在局限,不可能在所有的select元素外添加iframe。方法二有的放矢,在需要的div上面添加iframe,是常见的解决办法。
分享到:
相关推荐
IE6下解决弹出div 被父页面的select 覆盖的问题,使用jquery 的dialog div 进行增加,删除,修改等操作。 这个是IE6下特有的问题。 下面是解决方法: 1.下载jquery.bgiframe.js ,在我的下载资源中有 2.需要修改...
JS包,可以用来规范一些JS限制问题,比如DIV被 select覆盖
jQuery UI dialog IE6下处理select框被遮挡jquery.bgiframe.js
jquery.bgiframe.js在IE9下的错误 代码如下: SCRIPT5022: DOM Exception: INVALID_CHARACTER_ERR (5) jquery.bgiframe.js, 行8 字符976 错误代码 代码如下: 1 {if(!$(‘iframe.bgiframe’,this)[0])this....
前端项目-jquery-bgiframe,一个jquery插件,在处理IEZ索引问题时有助于减轻痛苦。
jquery.bgiframe示例 博文链接:https://lxy19791111.iteye.com/blog/285177
bgiframe 插件用来轻松解决 IE6 z-index 的问题,如果网页上有浮动区块和下拉选单重叠时,在IE6会看到下拉选框总是把浮动区块覆盖住,无论怎么调整 z-index 都是没用的,而用 bgiframe 就可以轻松解决这个问题。...
bgiframe_2.1.1.zip,jquery dialog的插件
笔者在项目中使用 jquery.ui.dialog 1.7.2时,当使用$("#d").dialog("open");时,dialog总是弹出在option中指定的位置;
/** * 让iframe 显示在 指定的div下面 针对ie6 select挡住div 的bug 采用 iframe来当作div的底 * * @param string divId 需要解决的div层 * @param string iframeId 采用的 IFRAME ,如果不指定 自动...
jquery需要的所有js文件 /*! * jQuery UI 1.8.18 * * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * ...
今天我说说iframe解决的一般方法,已经使用jQuery插件bgiframe解决IE6 select z-index无效,遮挡div的bug。 解决方法之一:Iframe包裹select元素 使用iframe包住select,这样iframe有z-index,只要在div上设置的z-...
经过分析,网上的参考,终于搞定了~~ jQuery插件代码: 代码如下: jQuery.fn.selectItem = function(targetId) { var _seft = this; var targetId = $(targetId); this.toggle( function() { var A_top = $(this)....
在IE6的環境下,如果網頁上有div區塊和下拉選單重疊在一起的時候,即使再怎麼調整下拉選單的z-index,下拉選單還是會把div區塊蓋住(在Firefox是正常的),google了一下網路上的資料,大多是用iframe來解這個問題,但...
代码如下:$(“#dialog”).dialog({ bgiframe: true, autoOpen: false, position: [PosX, PosY], //alert 出来为:” , “(不含双引号),或者报错,不知什么原因。 height: 300, modal: true, buttons: { ‘创建新...
JQUERY Dialog弹出框和JQUERY Uploadify下载插件综合详细参数详解,非常值得收藏,中文描述和实例讲解。
* Upgrade JS Libary (jQuery Autocomplete, jQuery Cookie, jQuery bgIframe) * Version 2.0-beta9 : * Fix conflict with plugin using Google Library Javascript for jQuery. Example : "Use Google Libraries...