如图，一个常见的网页效果，像QQ书签，百度收藏均使用这种效果，在用户未登录时，“弹”出一个登录框，输入帐号密码后通过AJAX激活后去除该框即可。这个框不是在浏览器之外弹出的，也不是漂浮的，所以也不会被各种浏览器拦截。怎么实现呢？实际上是先创建一个底下的层，长和宽均为全屏，再使用CSS的FLITER的ALPHA滤镜效果，使背景模糊，并且不可选，再在此上创建一个登录框即可。
1.准备好一个网页模板，建议是符合XHTML4.0的，如果没有，也可以到 www.freecsstemplates.org 下载一个。
2.
在页面最尾部的</body>前加上
<div id=mask style=display:none > </div>
//请自行加上引号以符合XHTML标准 
,中间最好加一个空格的HTML转义字符，以免某些浏览器当容器的内容是空的时候不会显示。这是一个背景模糊的隐藏层,另外，默认是隐藏的，可以在页面载入的时候用JS ，像<body onload=check();> 这样来激活
在CSS中创建
#mask{position:absolute;z-index:2;top:0px;left:0px; right:0; bottom:0;background-color:#999999;filter:alpha(opacity=50);-moz-opacity:0.50;opacity:0.50;}
//请注意，这里没有定义这个层的长和宽，因为直接定义 100%可能会不兼容某些浏览器,所以要在后面使用JS获取屏幕宽度和高度后再赋值。位置是相对的才行哦！
现在来创建登录框的部分
<div id=loginform style=display:none>
<table>
<tr><td>
<form>
<input />
……
</form>
</td>
</tr>
</table>
</div>
//这是登陆框的主题部分，建议在这个容器以内使用TABLE以便定位，否则某些浏览器会变形。
再添加loginform的CSS定义：
#loginform{position:absolute;z-index:4;width:600px;height:360px; background-color:#F5FFE0;border:1px solid #A5CF3D;}
//这里面的长，宽，可以先预设，同样，相对于顶部和左部的距离也最好用JS来设置。
现在来设置一下JavaScript
<script>
function check(){
//请自行根据情况设置条件，或者也可以用 <a onlick=check();>Check</a>这样来使用，那就不需要判断条件了。
if 条件 {
$(‘mask’).style.height=document.body.clientHeight + ‘px’;
$(‘mask’).style.width=document.body.clientWidth + ‘px’;
$(‘mask’).style.display=’block’;
//设置模糊层的宽和高，并让它显示出来，需要在后面加上 ‘px’，否则Firefox浏览器会出错
$(‘loginform’).style.top=(document.body.clientHeight -350)/2 + ‘px’;
$(‘loginform’).style.left=(document.body.clientWidth -600)/2 + ‘px’;
$(‘loginform’).style.display=’block’;
//设置弹出框距离顶部和左部的距离，也可以固定为 xxx px，并让它显示出来
}
}
function close1(){
$(‘loginform’).style.display=’none’;
$(‘mask’).style.display=’none’;
}
//如果要关闭这个层只要让他们设置为隐藏就可以了。
</script>
标签： css, html, javascript
学习了
收藏先
有才,有下去试试!不懂的来问啦!
学习一下