代码如下：

<style>

.win{

POSITION:absolute;left:55%;top:60%;

width:400px;height:250px;

margin-left:-300px;margin-top:-200px;border:1pxsolid#888;

background-color:#d6cfcb;text-align:center;

line-height:60px;z-Index:3;

}

</style>

JS代码：

<script>

functionopenLogin(){

document.getElementById("win").style.display="";

}

functioncloseLogin(){

document.getElementById("win").style.display="none";

}

</script>

html代码：

<divid="win"class="win"style="display:none">

<formaction="javascript:jump();"method="post">

<spanstyle="font-size:20px;">欢迎登陆壹家怡园</span>

<labelclass="label">用户名:</label><inputtype="text"class="input"id="user"/>

<labelclass="label">密码:</label><inputtype="password"class="input"id="psw"/>

<inputtype="reset"value="重输"class="input1"/>

<inputtype="button"value="退出"class="input3"onclick="closeLogin();"/>

<inputtype="submit"value="确定"class="input2"/>

</form>

</div>

<ahref="javascript:openLogin();">打开</a>

<ahref="javascript:closeLogin();">关闭</a>

再说下在点击之后造成的阴影效果，即除了登录框外的都会变暗，并且不可操作。核心思想就是我们在设置一个div层，并且将其初始设置为隐藏，当点击比如登陆时，和登陆框一起弹出，并且设置这个div的宽度和高度分别为屏幕的高度和宽度，颜色上也是选择暗一点的带有透明度的颜色（这个是在上面登录框的基础上进行操作的）

代码如下：

CSS样式：

<style>

.hidebg{

position:absolute;left:0px;top:0px;

background-color:#000;

width:100%;

filter:alpha(opacity=60);

opacity:0.6;

display:none;

z-Index:2;

}

</style>

JS代码：

functionopenLogin(){

document.getElementById("hidebg").style.display="block";

document.getElementById("hidebg").style.height=document.body.clientHeight+"px";

}

functioncloseLogin(){

document.getElementById("hidebg").style.display="none";

}

html代码：

<divid="hidebg"class="hidebg"></div>

下一篇：JSP 多个文件打包下载代码