js點選事件 登入
阿新 • • 發佈：2021-11-01
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/login.css"/> <script type="text/javascript"> window.onload=function(){ var btn=document.querySelector("button"); btn.onclick=function(){ var box=document.querySelector(".box"); box.style.display="flex"; } var close=document.querySelector(".close"); close.onclick=function(){var box=document.querySelector(".box"); box.style.display="none"; } } // document.querySelectorAll() 找全部 // 配合 遍歷使用 找到所以button // document.querySelector()找一個 </script> </head> <body> <button type="button">顯示登入框</button> <div class="box"> <div class="content"> <span class="close">×</span> </div> </div> </body> </html>
*{ margin: 0; padding: 0; } body, .box{ width: 100%; height: 600px; } body { position: relative; } .box{ position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.333); display: flex; justify-content: space-around; align-items: center; display: none; } .box .content .close{ float: right; width: 16px; display: block; } .box .content{ width: 750px; height: 380px; background-color: #FFFFFF; }