js實現(xiàn)登錄彈框

更新時間：2022年08月23日 11:46:04 作者：SuperM_L

這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)登錄彈框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)登錄彈框，供大家參考，具體內(nèi)容如下

html:

<body>
? ? <div id="M"><!--用div將所有東西套起來,需要設(shè)置絕對位置-->
? ? <input type="button" value="登錄" class="login_btn" onclick="login()"><!--觸發(fā)登陸彈框按鈕-->
? ? </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設(shè)置為絕對位置,方便寫彈出界面,寬度別忘了,否則可能亂布局*/
? 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;
}
/*以下不是重點,登陸框中的具體內(nèi)容*/
#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"
//這里下邊一條用于設(shè)置登陸框中的內(nèi)容,不重要
? ? 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);
? ? //不重要:設(shè)置關(guān)閉按鈕和點擊背景觸發(fā)關(guān)閉事件
? ? 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;
? ? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: