<div id="layer" style="display: none; " class="loginForm"> <s:form name="loginForm" action="login" namespace="/member" method="post" > <div class="loginInputStyle"> 用户名 <input name="username" type="text" style="180px"/> </div> <div class="loginInputStyle"> 密码 <input name="password" type="password" style="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项目时使用的,只是截取了部分代码,虽然不完整,但是基本实现了弹出登录窗口的功能。