实现弹出登录窗口

<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项目时使用的,只是截取了部分代码,虽然不完整,但是基本实现了弹出登录窗口的功能。

posted on 2013-12-23 13:25  SherryIsMe  阅读(398)  评论(0编辑  收藏  举报

导航