體驗效果：
http://hovertree.com/texiao/jquery/89/
末尾附有源碼下載
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery實現可推動的彈出登錄對話框層_何問起</title><base target="_blank" />
<link href="http://hovertree.com/texiao/jquery/89/css/demo.css" rel="stylesheet" />
<script src="http://down.hovertree.com/jquery/jquery-1.10.2.min.js"></script>
<script src="http://hovertree.com/texiao/jquery/89/layer/layer.js"></script>
<script src="http://hovertree.com/texiao/jquery/89/js/demo.js"></script>
<style>a{color:blue}</style>
</head>
<body>
<div id="header">
<div class="hitem dreg"><a href="http://hovertree.com/menu/texiao/">注冊</a></div>
<div class="hitem dlogin"><a href="javascript:;" onClick="ShowLoginBox()" target="_self">登錄</a></div>
</div>
<div>請點擊右上角的登錄鏈接。<a href="http://hovertree.com/h/bjaf/ec38oldv.htm">說明</a></div>
<div id="dloginbox">
<div class="loginitem"><input type="text" id="txtUserName" placeholder="請輸入用戶名"/></div>
<div class="loginitem"><input type="password" id="txtPwd" placeholder="請輸入密碼" /></div>
<div class="loginitem"><a href="javascript:;" onClick="Login()">登錄</a></div>
</div>
</body>
</html>
點擊這裡進入下載