|
cnitblog.com/lxasp - - 有一种信念叫做编程
|
posts - 61, comments - 34, trackbacks - 0, articles - 0
|
|
|
Posted on 2015-06-28 14:07 lxasp 阅读(1172) 评论(0) 编辑 收藏 引用 所属分类: AJAX
<style type="text/css">/*<![CDATA[*/
/*ie6的下拉列表是最顶上的,当弹出层的时候,要隐藏掉,以免影响层的内容显示*/
select{
_visibility:expression(document.getElementById("overlay2").style.display=="none"?"visible":"hidden");
}
/*ie6,ie7当滚动时层会抖动,以下代码就可以解决,如果有图片就改url里的地址*/
body {
+background-image:url(about:blank);
+background-attachment:fixed;
}
#overlay2 {
background-color: #ccd;
bottom: 0;
height: 100%;
left: 0;
opacity: 0.5;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 3000;
/*ie6,ie7,ie8实现透明*/
filter: alpha(opacity=50);
/*ie6,ie7自动定位,解决不支持position:fixed*/
+position:absolute;
+width:expression(eval(Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth)));
+height:expression(eval(Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)));
}
#popme1 {
background-color: #efd;
position: fixed;
width: 90%;
height: 250px;
z-index: 3001;
left:15px;
top:15px;
border:2px solid #396;
clear:both;
/*ie6,ie7自动定位,解决不支持position:fixed*/
+position:absolute;
+width:expression(eval(Math.min(document.documentElement.scrollWidth,document.documentElement.clientWidth)*0.9));
+top:expression(eval(document.documentElement.scrollTop+15));
+left:expression(eval(document.documentElement.scrollLeft+15));
}
/*]]>*/</style>
以下 <a ></a> 代码用于显示隐藏弹出层,将其复制到popme1内就是隐藏层在外部就是显示层
<a href="javascript:(function(){var n='none',b='block',d=document.getElementById('popme1').style,o=document.getElementById('overlay2').style;if(d.display==b){d.display=n;o.display=n;o.zIndex=3000}else{d.display=b;o.display=b;o.zIndex=1000}})();void(0)">show popup mask</a>
<div style="display:none" id="popme1">popme1</div>
<div style="display:none" id="overlay2" onclick="void(0)"></div>
整个html文件只需要一个overlay2，不管有多少个popme2 popme3 都是共用一个overlay2。以前还特地到处找jQuery插件来测试出效果，现在就以上一些纯粹CSS/JS代码就完美实现了。
|
|