JS登入彈窗
阿新 • • 發佈：2020-10-21
效果展示：
完整程式碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11.box{ 12 width: 100%; 13 height: 100vh; 14 background-color: aqua; 15 display: flex; 16 } 17 .login{ 18 width: 100px; 19 height: 50px; 20 margin-top: 60px; 21 margin: auto; 22 background-color: cornflowerblue; 23 border: 0; 24 outline: none; 25 color: #fff; 26 } 27 #loginBox{ 28 width: 400px; 29 height: 400px; 30margin: auto; 31 background-color: #fff; 32 align-self: center; 33 text-align: center; 34 position: relative; 35 } 36 #loginH2{ 37 padding-top: 30px; 38 } 39 #loginH2:after{ 40 content: ""; 41 display: block; 42 width: 80%; 43 height: 1px; 44 margin: auto; 45 margin-top: 20px; 46 background-color: cornflowerblue; 47 } 48 #user,#password{ 49 width: 200px; 50 height: 30px; 51 margin-top: 30px; 52 outline: none; 53 } 54 #loginButton{ 55 width: 200px; 56 height: 40px; 57 margin-top: 30px; 58 outline: none; 59 border: 0; 60 background-color: cornflowerblue; 61 color: #fff; 62 } 63 #off{ 64 position: absolute; 65 top: 0; 66 right: 10px; 67 color: #757474; 68 cursor: default; 69 font-weight: 100; 70 } 71 </style> 72 </head> 73 <body> 74 75 <div class="box" id="box_1"> 76 <button type="button" id="clickLogin" class="login">click</button> 77 </div> 78 79 </body> 80 81 <script type="text/javascript"> 82 83 var btn = document.getElementById("clickLogin"); 84 var box = document.getElementById("box_1"); 85 var lb; 86 var clickOff; 87 btn.onclick = function (){ 88 var loginBox = document.createElement("div"); //建立最外層容器 89 loginBox.id = "loginBox"; //新增容器ID 90 box.appendChild(loginBox); //插入容器 91 btn.style = "display: none;"; 92 lb = document.getElementById("loginBox"); 93 appendH2(); 94 appendUser(); 95 appendButton(); 96 appendOff(); 97 } 98 99 function appendH2() { 100 var loginH2 = document.createElement("h2"); 101 loginH2.innerHTML = "登入"; 102 loginH2.id = "loginH2"; 103 lb.appendChild(loginH2); 104 } 105 function appendUser() { 106 var loginInput = document.createElement("input"); 107 loginInput.placeholder = "請輸入賬號"; 108 loginInput.id = "user"; 109 lb.appendChild(loginInput); 110 111 var loginInput2 = document.createElement("input"); 112 loginInput2.placeholder = "請輸入密碼"; 113 loginInput2.id = "password"; 114 loginInput2.type = "password"; 115 lb.appendChild(loginInput2); 116 } 117 function appendButton() { 118 var loginButton = document.createElement("button"); 119 loginButton.innerHTML = "登入"; 120 loginButton.id = "loginButton"; 121 lb.appendChild(loginButton); 122 } 123 function appendOff() { 124 var loginH3 = document.createElement("h3"); 125 loginH3.innerHTML = "X"; 126 loginH3.id = "off"; 127 lb.appendChild(loginH3); 128 clickOff = document.getElementById("off"); 129 130 clickOff.onclick = function (){ //關閉容器 131 box.removeChild(lb); //刪除容器 132 btn.style = "display: block;"; 133 } 134 } 135 136 </script> 137 138 </html>