PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> CSS >> 

网页特效:网页中间弹出窗口,背景变暗

网页特效:网页中间弹出窗口,背景变暗

来源:互联网  作者:  发布时间:2010-03-01
网页遮罩效果,可使整个网页背景变半透明,中间弹出一窗口。 当

网页遮罩效果,可使整个网页背景变半透明,中间弹出一窗口。

当然用jquery插件的话,这种效果可以轻易的实现.如果你想知道他实现的原理的话,还是看一下下面的代码.

以下为引用的内容:
<style>
.bg{position:absolute;z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;}
.beian_winBG {
MARGIN-TOP: -100px; LEFT: 50%; MARGIN-LEFT: -190px; WIDTH: 376px; POSITION: absolute; TOP: 50%; HEIGHT:200px;border:#666666 1px solid;z-index: 1000;
}
</style>
<div id="alert_win" style="display:none;">
<div id="mask" style="top:0;left:0;position: absolute;z-index:1000;" class="bg"></div>
<DIV class=beian_winBG id=beian_popup><!--弹出框-->
<div id="divOneStep" style="z-index:1002;width:100%;height:200px;background: #fff;position:absolute;">
<div style="width:100%;background:#f1f1f1;height:30px;light-height:30px;border-bottom:#666666 1px solid;text-align:right;"><a href="javascript:;" onClick="alert_win.style.display='none';">点此关闭</a>&nbsp;</div>
<div>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</div>
</div>
<div style="z-index:1001;position:absolute;"><iframe id="frmOneStep" width="100%" height="200" frameborder="0" scrolling="no" src="about:blank"></iframe></div>
</DIV>
</div>
<a href="javascript:;" onClick="alert_win.style.display='block';">显示</a>
<p>alksdfjsdkal;jsdakljfdsalk;jdlks;ajdfslka;jfdslka;jfdasf</p>
<p>alksdfjsdkal;jsdakljfdsalk;jdlks;ajdfslka;jfdslka;jfdasf</p>


延伸阅读:
网页输入框的样式触发效果
JAVASCRIPT做激活搜索框关键字消失,失去焦点关键字出现的效果
弹出窗口,背景变暗js效果
js拖拽效果源码
js实现字体渐渐消失效果
css实现二张图片切换效果
网页有趣的按钮特效
JavaScript 拖拉缩放效果
JavaScript/JS实现文字跑马灯效果
Tags: 网页   特效   弹出   窗口   背景   js   javascript   css   弹出窗口   背景变暗  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号