实现弹出登录窗口

<div id="layer" style="display: none; " class="loginForm">
 <s:form name="loginForm" action="login" namespace="/member" method="post" >
　　<div class="loginInputStyle">  
　　用户名&nbsp;<input name="username" type="text" style="width:180px"/>
   </div>
   <div class="loginInputStyle">
   密码&nbsp;&nbsp;<input name="password" type="password" style="width:180px"/>
   </div>   
   <div class="loginInputStyle">
   <input type="image" src="/DessertHouse/image/loginIcon1.png" style="margin-left: 30px"   
   onclick="document.loginForm.submit()" /> 
   </div>
</s:form>  
</div>
<div id="bgLayer" style="position:absolute; display: none;"></div> 
<style type="text/css">
#bgLayer {
background: #939393 none repeat scroll 0 0;
height:100%;
width:100%;
left:0;
top:0; 
opacity: 0.5;
z-index: 10000;
}
#layer {
width: 400px;
height: 200px;
margin: -180px 0 0 -170px;
left: 50%;
top: 50%;
position: absolute;
background: #FFF;
z-index: 10001;
border: 1px solid #1B5BAC;
padding-top:50px;
} 
.loginInputStyle{
padding:10px;
}
</style>

<script language='javascript'>
function showDiv() {
　　var bg = document.getElementById("bgLayer");
　　var con = document.getElementById("layer");
　　var w = document.documentElement.clientWidth;  //网页可见区域宽
　　var h = document.documentElement.clientHeight;//网页可见区域高
　　bg.style.display="block";
　　bg.style.width =  w + "px";
　　bg.style.height =  h + "px";
　　con.style.display="block";
}
function closeDiv() {
　　var bg = document.getElementById("bgLayer");
　　var con = document.getElementById("layer");
　　bg.style.display = "none";
　　con.style.display = "none";
}
</script>

上段代码是我在写J2EE项目时使用的，只是截取了部分代码，虽然不完整，但是基本实现了弹出登录窗口的功能。

转载于:https://www.cnblogs.com/SherryIsMe/p/3487276.html