<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div模态窗口登陆效果</title>
<style type="text/css" >
#haiwi_overlay{
position:fixed;
z-index:10000;
top:0px;
left:0px;
height:100%;
width:100%;
background:#000;
display:none;
}
</style>
</head>
<body>
<input type="button" value="点击测试" onclick="fopen()" />
<div id="modalDiv" style="display:none;">
<table style="background-color:#FFF; width:300px;height:200px; border:2px solid #666666;">
<tr><td align="center" "><h3>用户登录</h3></td></tr>
<tr><td align="center" >
<label for="username">用户名:</label>
<input type="text" name="username" id="username" class="txtfield" tabindex="1" style=" width:160px;" />
</td></tr>
<tr><td align="center">
<label for="password">密 码:</label>
<input type="password" name="password" id="password" class="txtfield" tabindex="2" style=" width:160px;" />
</td></tr>
<tr><td style="background-color:#F0F0F0;" align="center">
<input type="button" name="loginbtn" id="loginbtn" value="登录" tabindex="3">
<input type="button" name="loginbtn" id="loginbtn" value="关闭" onclick="fclose();" tabindex="3">
</td></tr>
</table>
</div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="haiwiModal.js"></script>
<script type="text/javascript">
function fopen(){
$.openHaiwiModal("modalDiv");
}
function fclose(){
$.closeHaiwiModal("modalDiv");
}
</script>
</body>
</html>
