Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 模仿模态框
Blogger Information
Blog 47
fans 1
comment 0
visits 40591
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
模仿模态框
新手1314
Original
470 people have browsed it

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. }

实现：

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post