js實現登入彈框

2022-08-23 14:00:37

本文範例為大家分享了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;
    }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

js實現登入彈框

熱門文章