ASCII码 ASCII码

模仿模态框

发布于：2022-03-24 10:09:05  栏目：技术文档

html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>模态框</title>
  8.     <link rel="stylesheet" href="zuoye.css" />
  9.   </head>
  10.   <body>
  11.     <header>
  12.       <h1 class="title">新手1314的博客</h1>
  13.       <button onclick="show()">登录</button>
  14.     </header>
  15.     <div class="show">
  16.       <div class="show-ad" onclick="close()"></div>
  17.       <form action="" class="show-form">
  18.         <fieldset style="display: grid; gap: 1em">
  19.           <legend>用户登录</legend>
  20.           <input type="text" name="user" placeholder="请输入用户名" />
  21.           <input type="password" name="password" placeholder="请输入密码" />
  22.           <button>登录</button>
  23.         </fieldset>
  24.       </form>
  25.     </div>
  26.     <script src="zuoye.js"></script>
  27.   </body>
  28. </html>

css样式：

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. header {
  7.   background-color: aqua;
  8.   padding: 0.5em 1em;
  9.   display: flex;
  10. }
  11. header .title {
  12.   color: #fff;
  13.   font-weight: lighter;
  14.   letter-spacing: 3px;
  15.   text-shadow: 1px 1px 1px #000;
  16. }
  17. header button {
  18.   margin-left: auto;
  19.   border: none;
  20.   border-radius: 0.5em;
  21.   width: 60px;
  22. }
  23. header button:hover {
  24.   cursor: pointer;
  25.   background-color: black;
  26.   color: beige;
  27.   transform: 0.5s;
  28.   box-shadow: 0 0 5px #fff;
  29. }
  31. .show .show-form fieldset {
  32.   background-color: blanchedalmond;
  33.   border: 0;
  34.   height: 16em;
  35.   padding: 2em 3em;
  36.   box-sizing: 0 0 5px #000;
  37. }
  39. .show .show-form fieldset legend {
  40.   background-color: violet;
  41.   color: #000;
  42.   padding: 7px 1.5em;
  43. }
  45. .show .show-form fieldset input {
  46.   font-size: 14px;
  47.   padding-left: 1em;
  48.   outline: none;
  49.   border: 2px solid #fff;
  50.   height: 3em;
  51. }
  52. .show .show-form fieldset input:focus {
  53.   border: 0;
  54.   box-shadow: 0 0 8px #888;
  55. }
  57. .show .show-form fieldset button {
  58.   background-color: aqua;
  59.   color: #000;
  60.   border: 0;
  61.   font-size: 16px;
  62.   height: 2.5em;
  63. }
  64. .show .show-form fieldset button:hover {
  65.   cursor: pointer;
  66.   background-color: aquamarine;
  67. }
  68. .show .show-form {
  69.   position: fixed;
  70.   left: 50em;
  71.   right: 50em;
  72.   top: 10em;
  73. }
  74. .show .show-ad {
  75.   position: fixed;
  76.   top: 0;
  77.   left: 0;
  78.   right: 0;
  79.   bottom: 0;
  80.   background-color: rgb(0, 0, 0, 0.8);
  81. }
  82. .show {
  83.   display: none;
  84. }

js代码：

  1. function show() {
  2.   // 获取模态框元素
  3.   const show = document.querySelector(".show");
  5.   // 显示模态框
  6.   show.style.display = "block";
  8.   // 焦点自动置入第一个输入框email
  9.   show.querySelector("input:first-of-type").focus();
  10. }
  12. function close() {
  13.   // 获取模态框元素
  14.   const show = document.querySelector(".show");
  16.   // 关闭模态框
  17.   show.style.display = "none";
  18. }

实现：

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行