溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“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'><h3>登錄到記享</h3></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;
}
}到此，相信大家對“js如何實現登錄彈框”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
