用js做登录弹出框
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>自定義登陸窗口</title><style type="text/css">* {margin: 0px;padding: 0px;}/* 彈出登陸框按鈕 */#login-header {text-align: center;height: 30px;line-height: 30px;}#login-header a {font-size: 24px;text-decoration: none;color: black;}/* 登陸框主體 */.login {position: absolute;width: 512px;height: 284px;z-index: 9999;display: none;background-color: white;/* 這里要注意絕對定位的盒子怎么在屏幕顯示居中 */left: 50%;margin-left: -256px;margin-top: 142px;border: 1px solid gray;}/* 登陸框標題 */.login-title {width: 100%;height: 40px;line-height: 40px;text-align: center;margin-bottom: 20px;cursor: move;}.login-title span a {text-decoration: none;border: 1px solid gray;font-size: 12px;color: black;border-radius: 20px;width: 40px;height: 40px;background-color: #fff;position: absolute;top: -20px;right: -20px;}/* 登陸表單 */.login-input {margin: 20px 0px 30px 0px;}.login-input label {float: left;height: 35px;line-height: 35px;width: 90px;padding-left: 10px;text-align: right;font-size: 14px;}.login-input input.list-input {height: 35px;line-height: 35px;width: 350px;text-indent: 5px;}/* 登陸框登陸按鈕 */.loginSubmit {width: 260px;height: 40px;text-align: center;border: 1px solid gray;background-color: white;margin-left: 120px;}/* 遮蓋層 */.bg {background-color: #000;width: 100%;height: 100%;top: 0px;position: fixed;opacity: 0.3;-webkit-opacity: 0.3;-moz-opacity: 0.3;display: none;}</style>
</head><body><!-- 彈出登陸框按鈕 --><div id="login-header"><a id="adminBtn" href="javascript:void(0)">點擊，彈出登陸框</a></div><!-- 登陸框主體 --><div id="login" class="login"><!-- 登陸框標題 --><div id="login-title" class="login-title">登陸會員<span><a id="closeBtn" href="javascript:void(0)">關閉</a></span></div><!-- 登陸框表單 --><div id="login-form"><div class="login-input"><label>登錄名：</label><input type="text" placeholder="請輸入登錄名" class="list-input" /></div><div class="login-input"><label>密???碼：</label><input type="password" placeholder="請輸入密碼" class="list-input" /></div></div><!-- 登陸框登陸按鈕 --><input type="submit" id="loginSubmit" value="登陸會員" class="loginSubmit" /></div><!-- 遮蓋層 --><div id="bg" class="bg">sada</div><!-- 插入JS代碼 --><script type="text/javascript">var login = document.getElementById('login');var bg = document.getElementById('bg');// 1.點擊"點擊，彈出登陸框",彈出登陸窗口和遮蓋層var adminBtn = document.getElementById('adminBtn');adminBtn.onclick = function() {login.style.display = "block";bg.style.display = "block";return false;}// 2.點擊"關閉",隱藏登陸窗口和遮蓋層var closeBtn = document.getElementById('closeBtn');closeBtn.onclick = function() {login.style.display = "none";bg.style.display = "none";return false;}// 3.鼠標拖拽功能var login_title = document.getElementById('login-title');login_title.onmousedown = function(e) {e = e || window.event;var x = e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);var y = e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);var boxX = login.offsetLeft;var boxY = login.offsetTop;var mouse_in_boxX = x - boxX;var mouse_in_boxY = y - boxY;document.onmousemove = function(e) {var x = e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);var y = e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);login.style.left = x - mouse_in_boxX + 256 + 'px';login.style.top = y - mouse_in_boxY - 142 + 'px';}}login_title.onmouseup = function() {document.onmousemove = null;}</script>
</body></html>
總結
- 上一篇： 邻接矩阵的深度优先和广度优先搜索
- 下一篇： 易语言多线程Api封装线程挂起恢复销毁