最近项目采用了jquery作为js库，easyui作为前提ui，但是它的的弹出宽遮罩没有解决IE6下select的穿透div层的问题，
进过讨论，决定采用iframe来覆盖select的方式解决。
用了iframe覆盖解决了传统问题，但是新的问题又出现了，如果页面有滚动条时，页面滚动的时候，被覆盖的select闪烁很厉害，页面停止了，闪烁也停止了，由于我们项目还采用了blockUI来自己弹出遮罩，发现blockUI也是采用iframe遮盖的方式：
// blockUI uses 3 layers for blocking, for simplicity they are all used on every platform;
// layer1 is the iframe layer which is used to supress bleed through of underlying content
// layer2 is the overlay layer which has opacity and a wait cursor (by default)
// layer3 is the message content that is displayed while blocking
var lyr1 = ($.browser.msie || opts.forceIframe)
? $('<iframe class="blockUI" style="z-index:'+ (z++) +';display:none;border:none;margin:0;padding:0;position:absolute;width:100%;height:100%;top:0;left:0" src="'+opts.iframeSrc+'"></iframe>')
: $('<div class="blockUI" style="display:none"></div>');
var lyr2 = $('<div class="blockUI blockOverlay" style="z-index:'+ (z++) +';display:none;border:none;margin:0;padding:0;width:100%;height:100%;top:0;left:0"></div>');
var lyr3, s;
if (opts.theme && full) {
s = '<div class="blockUI ' + opts.blockMsgClass + ' blockPage ui-dialog ui-widget ui-corner-all" style="z-index:'+z+';display:none;position:fixed">' +
'<div class="ui-widget-header ui-dialog-titlebar ui-corner-all blockTitle">'+(opts.title || ' ')+'</div>' +
'<div class="ui-widget-content ui-dialog-content"></div>' +
'</div>';
}
else if (opts.theme) {
s = '<div class="blockUI ' + opts.blockMsgClass + ' blockElement ui-dialog ui-widget ui-corner-all" style="z-index:'+z+';display:none;position:absolute">' +
'<div class="ui-widget-header ui-dialog-titlebar ui-corner-all blockTitle">'+(opts.title || ' ')+'</div>' +
'<div class="ui-widget-content ui-dialog-content"></div>' +
'</div>';
}
else if (full) {
s = '<div class="blockUI ' + opts.blockMsgClass + ' blockPage" style="z-index:'+z+';display:none;position:fixed"></div>';
}
else {
s = '<div class="blockUI ' + opts.blockMsgClass + ' blockElement" style="z-index:'+z+';display:none;position:absolute"></div>';
}
lyr3 = $(s);
从以上代码可以看出它采用了3层来遮罩，
1，遮盖层（IE6及以下版本为iframe）
2，透明层
3，弹出遮罩时，信息显示层
IE6时，它又对这3层进行了fixed处理：
// simulate fixed position
$.each([lyr1,lyr2,lyr3], function(i,o) {
var s = o[0].style;
s.position = 'absolute';
if (i < 2) {
full ? s.setExpression('height','Math.max(document.body.scrollHeight, document.body.offsetHeight) - (jQuery.boxModel?0:'+opts.quirksmodeOffsetHack+') + "px"')
: s.setExpression('height','this.parentNode.offsetHeight + "px"');
full ? s.setExpression('width','jQuery.boxModel && document.documentElement.clientWidth || document.body.clientWidth + "px"')
: s.setExpression('width','this.parentNode.offsetWidth + "px"');
if (fixL) s.setExpression('left', fixL);
if (fixT) s.setExpression('top', fixT);
}
else if (opts.centerY) {
if (full) s.setExpression('top','(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"');
s.marginTop = 0;
}
else if (!opts.centerY && full) {
var top = (opts.css && opts.css.top) ? parseInt(opts.css.top) : 0;
var expression = '((document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + '+top+') + "px"';
s.setExpression('top',expression);
}
});
对第一，第二层宽，高定位；
对第三层top设定了一个表达式
对此，我也依样画葫芦的把它的代码搬到easyui中的window组件的遮罩中，最后发现我无论怎么设置，select还是会闪烁；
后来细细看了下代码，把他的不相关代码都注释掉，最后发现问题的关键是对第三层设定的top上，为了验证，我把blockUI的第三层div注释掉，果然select也闪烁；原来它的目的是当页面滚动时，自动调整第三层的top，使第三层固定保存在页面可视范围的顶部；
对此，我比对easyui中加入window组件中的代码，基本保存了blockUI的原理，可是select就是会闪烁，最后发现问题：
state.mask.css({
zIndex: $.fn.window.defaults.zIndex++,
width: getPageArea().width,
height: getPageArea().height,
display: 'none'
});
原来这个遮罩height设定的问题，把height该成100%，问题解决。
为此，特别写了一个简单的html页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ieselect.html</title>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<select id="sel1"></select>
<br>
<select id="sel2"></select>
<iframe id="iframe" style="z-index:9000;display:none;border:0;width:100%;height:100%;position:absolute;"></iframe>
<div id="div" style="z-index:9001;display:none;width:100%;height:100%;position:absolute;"></div>
<button onclick="display();">display</button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function display(){
$('iframe').style.left = 0;
$('iframe').style.top = 0;
$('iframe').style.height = Math.max(document.body.scrollHeight, document.body.offsetHeight);
$('iframe').style.display = 'block';
$('div').style.left = 0;
$('div').style.top = 0;
$('div').style.display = 'block';
$('div').style.setExpression('top', '(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"');
}
</script>
</html>
分享到：
相关推荐
标题 "在IE6中浮动层遮盖不住select的方法" 指的是在使用Internet Explorer 6浏览器时，遇到的一个常见问题。在网页设计中，浮动层（通常通过CSS的`position: absolute`或`position: fixed`实现）常用于创建弹出窗口...
本文将深入探讨如何利用jQuery解决一个特定的问题：在IE6下，Select元素总是显示在具有较高z-index的图层（如div）之上。 首先，我们要理解z-index的概念。在CSS中，z-index是一个用于控制元素在垂直方向（即Z轴）...
通过以上步骤，我们可以成功地使用`<iframe>`作为遮罩层，解决IE6下`<select>`无法被`<div>`遮盖的问题。值得注意的是，虽然这个方法在IE6中有效，但它并不适用于其他现代浏览器，因为这些浏览器已经修复了这个问题...
标题"解决DIV在IE下被下拉列表select穿透的问题(二)"所提及的，是一个典型的IE浏览器特有的问题。这个问题涉及到HTML中的`<div>`元素和`<select>`下拉列表之间的交互，具体表现为在Internet Explorer（特别是旧版本...
第一就是比较有名的：一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例： 注解：如果你在FirFox下和IE7下看都 在html中关于select元素的问题在很多地方都提出过，而在前段时间的项目中，刚好...
在使用iview的过程中，我们可能会遇到select下拉框选项错位的问题，当弹出框超过一屏需要滚动时，select的下拉选项会出现错位。这种问题的出现可能是由于iview组件的样式设置引起的。 在iview中，select下拉框组件...
要解决`<Object>`标签遮盖`<div>`标签的问题，我们可以尝试以下几种方法： 1. **CSS层级调整**： 使用CSS的`z-index`属性可以控制元素的堆叠顺序。给`<div>`标签设置一个比`<Object>`标签更高的`z-index`值，可以...
然而，在实际应用中，当layer弹窗内的select组件展开时，有时会出现被其他元素遮挡的问题，这会严重影响用户体验。为了解决这一问题，我们可以采取以下策略。 首先，我们要理解导致select被遮挡的原因。通常，layer...
JS+CSS遮盖层，完全支持ie等主流浏览器，并解决在ie6下无法遮盖窗口级控件问题。
"android控件放大被遮盖已解决"这个主题就是针对这一问题的解决方案。 首先，我们需要理解Android的布局层次和控件的Z轴顺序。在Android的视图系统中，每个控件都有一个层级，决定了它们在屏幕上的覆盖关系。默认...
页面遮盖层的设计目标是创建一个可自定义的解决方案，以适应不同的应用场景。"blockui.js"这个文件很可能是实现这一功能的核心脚本。它可能包含了一些函数和方法，用于创建、显示、隐藏以及自定义遮盖层的样式和行为...
使用iframe遮盖select出现的问题
总结来说，当我们遇到select2在Bootstrap模态框中无法正常使用的问题时，可以根据页面的具体情况选择合适的方法进行解决。通常，修改.enforceFocus()方法可以迅速解决问题，但是我们需要考虑到这可能会对模态框的...
本文将详细探讨这一问题，并提供解决方案。 #### z-index属性简介 `z-index`属性用于控制HTML元素的堆叠顺序。具有更高`z-index`值的元素会显示在具有较低`z-index`值的元素之上。默认情况下，`z-index`只对设置了...
下面我们将详细探讨这个问题，并提供解决方案。 首先，我们需要理解Android系统是如何处理键盘弹出的。当用户点击输入框时，系统会启动相应的输入法服务，例如软键盘。默认情况下，软键盘会改变Activity的Window...
当Flex组件通过IFrame嵌入到JSP页面时，可能会出现遮盖问题，即JSP页面的内容覆盖了Flex元素，或者反之。这是因为浏览器对HTML元素和IFrame内容的渲染方式不同，以及CSS的Z-index属性的管理。 Z-index是CSS中的一个...
这个问题在标题“android 动画被父布局遮盖问题解决1”中被提及，并在描述中给出了解决方案。 首先，我们要理解这两个关键属性的作用： 1. `android:clipChildren="false"`：这个属性默认为true，意味着父布局会...
cdr9在win10系统完美解决保存、输出、另存选项遮盖问题drawintl.dll
3. **浏览器兼容性**：针对IE6的特性，可能需要使用特定的CSS hack或JavaScript库，如jQuery或Modernizr，来解决盒模型、透明度支持等问题。 4. **性能考虑**：避免在DOM树中频繁插入和删除元素，可能导致不必要的...