解决IE6下select显示在弹出框上问题
利用定位position:absolute;z-index:1;和iframe[z-index:-1]来解决此问题,最好根据需要加上: border='0' frameborder='0' scrolling='no'来去除滚动条和边框,需要使用jquery1.7.2.js。
解决方法:
1.将iframe放到弹出层的最外层里的最后面,也可以是里面,定义z-index:-1;。
1: <div class="left_main_menu">
2: <div class="left_menu_left">
3: <asp:Literal ID="Literal1" runat="server"></asp:Literal>
4: </div>
5: <div class="left_menu_right" title="点击隐藏菜单">
6: <div class="left_menu_rightbody">隐藏菜单</div>
7: <iframe style="position: absolute; left: -800px; top: -600px; z-index: -1; width: 2048px; height: 1800px; *position: absolute; opacity: 0.3; filter: alpha(opacity=10);"></iframe>
8: </div>
9: </div>
css
<style type="text/css">
.left_main_menu{width:180px;height:auto;position:fixed;left:0;top:40px;border:1px solid #ccc;box-shadow:0px 0px 30px rgb(170,170,170);padding:2px;background-color:#0099CC;overflow:hidden;z-index:999;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;_position:absolute;}
.left_main_menu .left_menu_left{width:163px;height:100%;overflow:auto;overflow-x:hidden;float:left;background:#F5FAF1;}
.left_main_menu .left_menu_right{width:15px;height:100%;float:right;background:#0099cc;text-align:center;cursor:pointer;color:#FFFFFF;font-weight:bold;}
.left_main_menu .left_menu_right:hover{background:#F5FAF1;color:#0099CC;}
.left_main_top a,.left_main_se a{height:28px;width:100%;text-align:center;line-height:28px; display:inline-block; color:#0099CC; cursor:pointer; text-decoration:none;_padding-top:8px; }
.left_main_top a{font-size:14px;font-weight:bold;background:#F0F0F0; border-top:1px solid #0099CC; border-bottom:1px solid #0099CC;}
.left_main_se a{ font-size:12px; font-weight:lighter;background:#F5FAF1;border-top:1px solid #0099CC;}
.left_main_top a:hover,.left_main_topcurrent a{background:#D0D0D0;cursor:pointer;height:28px;width:100%;text-align:center;line-height:28px; display:inline-block;text-decoration:none;}
.left_main_se a:hover,.left_main_securrent a{background:#D0D0D0;cursor:pointer;height:28px;width:100%;text-align:center;line-height:28px; display:inline-block;text-decoration:none;}
.left_main_lcon{height:24px;width:24px;vertical-align:middle;line-height:24px;}
.left_main_menu ul{margin:0px;padding:0px;}
</style>
2.在需要的层后面增加一个层来隐藏select,建议样式选择一样,设置z-index:999,弹出层:z-index:1000。
<div class="global-topwhs" id="topcss" style="z-index:1000">
<div class="glo-m">
<div class="glo-left">
<div class="glo-left-font">
<label>信息化系统欢迎您</label>
</div>
</div>
<div class="glo-right">
<label class='glo-tui'><a href="javascript:void(0)" id="signoutsystem">退出</a></label>
</div>
</div>
</div>
<div class="global-topwhs" style="z-index:999">
<iframe style="position: absolute; left: -800px; top: -600px; z-index: -1; width: 2048px; height: 1800px; *position: absolute; opacity: 0.3; filter: alpha(opacity=10);"></iframe>
</div>
3.第二种方式的整合体,iframe这里只对ie6有隐藏的目的,所以应该对于ie6生成,其它浏览器不生成ifram.js,哪里要用放到哪里。
//说明:
/****************************************************************************/
/**引用此文件的位置ie6下后面追加一个iframe,需要定义iframe的高宽左上四个参数**/
/****************************************************************************/
$(function () {
if ($.browser.msie && parseInt($.browser.version) <= 6) {
//是ie6,写iframe
$("script").each(function () {
if ($(this).attr('src') == '/js/ifram.js' && !$(this).next().is("iframe[tag=ie6]")) {
var height = $(this).attr('h');
var width = $(this).attr('w');
var left = $(this).attr('l');
var top = $(this).attr('t');
var tt = $(this).attr('tt');
if (tt == 'tt') {
$(this).after("<div tag=ie6 class='global-topwhs' style='z-index:999;background:red;'><iframe border='0' frameborder='0' scrolling='no' style='position: absolute; left:" + left + "; top: " + top + "; z-index: -1; width: " + width + "; height: " + height + "; *position: absolute; opacity: 0.3; filter: alpha(opacity=10);'></iframe></div>");
} else {
$(this).after("<iframe tag=ie6 border='0' frameborder='0' scrolling='no' style='position: absolute; left:" + left + "; top: " + top + "; z-index: -1; width: " + width + "; height: " + height + "; *position: absolute; opacity: 0.3; filter: alpha(opacity=10);'></iframe>");
}
}
});
}
});
理论上通过生成一个背后的div可以达到将iframe放到弹出层后的目的,但在实际过程中,ie6下有bug,看不到嵌套的div,所以还是将div放到页面,设置隐藏,根据需要,在此显示即可。
解决IE6下select显示在弹出框上问题的更多相关文章
- QMessageBox 弹出框上的按钮设置为中文
Qt 默认的弹出框上的按钮式英文,虽然也知道是什么意思,但终究不如中文看着顺眼. QMessageBox box(QMessageBox::Warning,"标题","弹 ...
- bootstrap 响应式导航条模板(含下拉菜单,弹出框)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 自设table表格,获取内容,并经弹出框的url传参,获取结果显示在弹出框,并加载合计
table表格,选择框 form id="editForm1"> <table class="table_form"> <td > ...
- [js]uploadify结合jqueryUI弹出框上传,js中的冒出的bug,又被ie坑了
引言 最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中 ...
- 练习PopupWindow弹出框之实现界面加载的时候显示弹出框到指定的view下面--两种延迟方法
今天在练习PopupWindow弹出框的时候,打算在界面加载的时候将弹出框展现出来并显示在指定的view下面. 初步方法是直接在OnResume方法里面直接执行showPopupWindows方法. ...
- 自动化测试-12.selenium的弹出框处理
前言 不是所有的弹出框都叫alert,在使用alert方法前,先要识别出到底是不是alert.先认清楚alert长什么样子,下次碰到了,就可以用对应方法解决. alert\confirm\prompt ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- Bootstrap:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
随机推荐
- 英语词汇(5)followed by / sung by / written by
Sung by 演唱者; [例句]In the recording I have today, it is sung by a male alto.我今天带的唱片是由一位男高音歌手唱的. follow ...
- word2vec初探(用python简单实现)
为什么要用这个? 因为看论文和博客的时候很常见,不论是干嘛的,既然这么火,不妨试试. 如何安装 从网上爬数据下来 对数据进行过滤.分词 用word2vec进行近义词查找等操作 完整的工程传到了我的gi ...
- python/MySQL练习题(二)
python/MySQL练习题(二) 查询各科成绩前三名的记录:(不考虑成绩并列情况) select score.sid,score.course_id,score.num,T.first_num,T ...
- 关于vertical-align和line-height的真知灼见
本文的重点是了解vertical-align和line-height的使用 涉及到的名词:基线,底端,行内框,行框,行间距,替换元素及非替换元素,对齐.只有充分理解这些概念才会灵活运用这两个属性. 什 ...
- POJ-2421 Constructing Roads---确定部分边的MST
题目链接: https://vjudge.net/problem/POJ-2421 题目大意: 还是给你n个点,然后求最小生成树.特殊之处在于有一些点之间已经连上了边. 思路: 和POJ-1751一样 ...
- 字段从varchar2修改为number,字段中的内容做修改,替换
#测试表的内容结构:如下所示: 其中DATEHH字段:代表时间,字段在表中是varchar2格式 现有如下需求:字段类型,从varchar2改变为number, 字段中 '.'去除, 2013103少 ...
- [C#]设计模式-建造者模式-创建型模式
介绍完工厂模式,现在来看一下建造者模式.建造者模式就是将一系列对象组装为一个完整对象并且返回给用户,例如汽车,就是需要由各个部件来由工人建造成一个复杂的组合实体,这个复杂实体的构造过程就被外部化到一个 ...
- Bootstrap中关闭第二个模态框时出现的问题和解决办法
Bootstrap中关闭第二个模态框时出现的问题和解决办法 1.关闭第二个模态框时,第一个模态框跟着消失. 解决办法: 第二个模态框的代码不要写在第一个模态框里面,确保两个模态框相对独立; 2.关闭第 ...
- ●BZOJ 3143 [Hnoi2013]游走
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=3143题解: 期望dp,高斯消元 首先有这样一种贪心分配边的编号的方案:(然后我没想到,233 ...
- ●BZOJ 3529 [Sdoi2014]数表
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=3529 题解: 莫比乌斯反演. 按题目的意思,令$f(i)$表示i的所有约数的和,就是要求: ...