js實現登錄彈框
本文實例為大傢分享瞭js實現登錄彈框，供大傢參考，具體內容如下
html:
<body> <div id="M"><!--用div將所有東西套起來,需要設置絕對位置--> <input type="button" value="登錄" class="login_btn" onclick="login()"><!--觸發登陸彈框按鈕--> </div> </body>
css:
#bg {/*重點:指定黑色背景覆蓋在所有組件上*/
background-color: rgba(0, 0, 0, 0.5);//0.5為透明度
position: fixed;/*絕對位置*/
z-index: 999;/*顯示在最高層*/
}
* {/*去掉外邊界*/
margin: 0;
padding: 0;
}
#M {/*重點:裝所有東西,再將此div設置為絕對位置,方便寫彈出界面,寬度別忘瞭,否則可能亂佈局*/
position: absolute;
width: 100%;
}
#close {/*不重要:彈框右上角的x樣式*/
border: none;
background-color: white;
float: right;
margin-right: 20px;
margin-top: 15px;
font-size: 20px;
}
#login {/*重要:登錄框*/
border-radius: 20px;
background-color: white;
position: fixed;/*重點絕對佈局*/
box-shadow: 0 0 10px 2px gray;
width: 400px;
height: 300px;
z-index: 1000;/*重點顯示在背景層之上,該屬性大於背景的該屬性*/
left: 55%;
top: 60%;
margin-left: -250px;
margin-top: -250px;
}
/*以下不是重點,登陸框中的具體內容*/
#login form {
margin-top: 50px;
}
#login form table {
margin: 0 auto;
}
#login form table tr td {
text-align: center;
border: none;
padding: 5px;
}
#login form table tr td .rem_pass {
font-size: 12px;
float: left;
margin-top: 10px;
margin-left: 30px;
}
#login form table tr td .rem_pass input {
height: 15px;
vertical-align: bottom;
margin-bottom: 1px;
margin-top: -1px;
}
#login form table tr .lable {
text-align: right;
}
#login form table tr #btn_login {
background-color: black;
margin-right: 60px;
}
.login_btn {
z-index: 1;
margin: 0 auto;
}
/*# sourceMappingURL=login.css.map */
js:
重點在於js
function login() {
//生成背景div和登錄框div並添加到body中
var swidth = window.screen.width;
var sheight = window.screen.height;
var bg = document.createElement("div");
bg.id = "bg";
bg.style.width = swidth + "px";
bg.style.height = sheight + "px";
document.body.appendChild(bg);
var login = document.createElement("div");
login.id = "login"
//這裡下邊一條用於設置登陸框中的內容,不重要
login.innerHTML="<button οnclick='close()' id='close'>X</button><form action='https://www.baidu.com/s' method='get'><table></tr><tr><td colspan='2'><h2>登錄到記享</h2></td></tr><tr><td class='lable'><label for='user'></label>用戶名:</td><td><input id='user' class='in' autofocus='autofocus' autocomplete=\"on\" type='text'></td></tr><tr><td class='lable'>密碼:</td><td><input class='in' type='password'></td></tr><tr><td colspan='2'><div class='rem_pass' ><label><input id='chioce' type='checkbox' name='rem' value='sadasd'>記住密碼</label></div><button type=\"submit\" class=\"btn btn-info\"id='btn_login' >登錄</button></td></table></form>"
document.body.appendChild(login);
//不重要:設置關閉按鈕和點擊背景觸發關閉事件
var close = document.getElementById("close");
close.onclick = bg.onclick = function () {
document.body.removeChild(bg);
document.body.removeChild(login);
}
};
window.onload = function(){
var btn = document.getElementById("login");
btn.onclick=function(){
login();
return false;
}
}
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。