领星动网编程开发之爆炸小宇宙

cnitblog.com/lxasp - - 有一种信念叫做编程
posts - 54, comments - 34, trackbacks - 0, articles - 0
<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内就是隐藏层在外部就是显示层
<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代码就完美实现了。
只有注册用户登录后才能发表评论。