存学 |jquery例子|Flex例子|ASP例子|.net学习

我们经常在网页中制作一些,弹出窗口的特效.

今天我也来秀一个DIV+CSS制作的弹出框,类似alert,但又比ALERT大些.

可以用在lightbox中,也和外面的那些lightbox一样.

废话不说直接写代码!

<div id=”blackdiv”>这个是最底层的黑色背景</div>
<div id=”maindiv”>
<div id=”contentdiv”>显示要显示的内容,类似图片啊,什么的</div>
</div>

div就完成了 ,很简单吧,等下我们来调试一下CSS,看到效果以后,你也可以更改DIV,来丰富自己的界面.

css

#blackdiv {position:absolute; top:0px; left:0px; width:100%; height:100%; background:#000; z-index:1000; filter:Alpha(opacity=20); opacity:0.2;}

# maindiv {position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:1010;}

#contentdiv {margin:0 auto; border:solid 5px #616161; width:300px; height:150px;}

好了,这样我们的效果就都完成了.快去试试吧.

同时我们再加上JQ的动画出入效果,那么这个弹出窗口就真正完美了!