简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 模态框案例
Blogger Information
Blog 38
fans 0
comment 0
visits 18877
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
模态框案例
Blackeye
Original
441 people have browsed it
  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>Dave Blog</title>
  8.     <link rel="stylesheet" href="hw.css">
  9. </head>
  10. <body>
  11.     <!-- 简易的后台管理页面头部 -->
  12.     <header>
  13.         <div class="left">
  14.             <span>Dave's Blog</span>
  15.         </div>
  16.         <div class="right">
  17.             <span>Dave</span>
  18.             <button onclick="showshadow()">登录</button>
  19.         </div>
  20.     </header>
  22.     <!-- 模态框主体 -->
  23.     <main>
  24.         <div class="login">
  25.             <!-- 遮罩 -->
  26.             <div class="shadow" onclick="closeshadow()"></div>
  27.             <!-- 登录页面 -->
  28.             <form action="" class="modal-form">
  29.                 <fieldset style="display: grid; gap: 1em">
  30.                     <legend>用户登录</legend>
  31.                     <input type="email" name="email" placeholder="user@email.com" />
  32.                     <input type="password" name="password" placeholder="不少于6位" />
  33.                     <button>登录</button>
  34.                 </fieldset>
  35.             </form>
  36.         </div>
  37.     </main>
  38. </body>
  40. <!-- 模态框显示关闭js -->
  41. <script>
  42.     function showshadow(){
  43.         let login = document.querySelector(".login");
  44.         login.style.display = 'block';
  46.     }
  47.     function closeshadow(){
  48.         let login = document.querySelector(".login");
  49.         login.style.display = 'none';
  50.     }
  51. </script>
  53. </html>
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. /* 修改根元素 */
  8. html{
  9.     font-size: 20px;
  10. }
  12. header{
  13.     width: 1fr;
  14.     height: 3rem;
  15.     background-color: deepskyblue;
  16.     position: relative;
  17. }
  19. .left{
  20.     /* 设置左边logo位置 */
  21.     left: 0;
  22.     margin-left: 3rem;
  23.     margin-top: 0.5rem;
  24.     position: absolute;
  25.     /* 扩大logo */
  26.     font-size: 1.5rem;
  27.     font-weight: bold;
  28.     color: rgb(179, 105, 179);
  29. }
  31. .right{
  32.     /* 确定右边控件定位 */
  33.     right: 0;
  34.     margin-right: 4rem;
  35.     margin-top: 0.75rem;
  36.     position: absolute;
  37. }
  39. .right span{
  40.     /* 细节右边控件 */
  41.     margin-right: 1rem;
  42.     color: rgb(179, 105, 179);
  43. }
  45. .right button{
  46.     /* 初始化button样式 */
  47.     border:none;
  48.     outline: none;
  49.     width: 2rem;
  50.     height: 1.5rem;
  51.     border-radius: 0.5em;
  52.     background-color: rgb(0,0,0,0.5);
  53.     color: white;
  54. }
  56. .right button:hover{
  57.     /* 为button增加选中样式 */
  58.     cursor: pointer;
  59.     background-color: orange;
  60.     transition: background-color 0.75s;
  61. }
  63. /* 初始化遮罩 */
  64. .login .shadow{
  65.     position: fixed;
  66.     top: 0;
  67.     right: 0;
  68.     bottom: 0;
  69.     left: 0;
  70.     background-color: rgb(0,0,0,0.5);
  71. }
  73. /* 初始化登陆框样式 */
  74. .login form fieldset{
  75.     position: fixed;
  76.     width: 15rem;
  77.     /* height: 11em; */
  78.     margin-left: 40vw;
  79.     margin-top: 40vh;
  80.     background-color: deepskyblue;
  81. }
  83. /* 初始化登陆框样式细节 */
  84. .login form fieldset{
  85.     border: none;
  86.     border-radius: 0.5em;
  87. }
  89. /* 初始化legend样式属性 */
  90. .login form fieldset legend{
  91.     background-color: rgb(6, 81, 179);
  92.     color: white;
  93.     margin-left: 1rem;
  94.     padding: 1rem;
  95.     font-size: 30px;
  96.     border: none;
  97.     border-radius: 0.5em;
  98.     margin-bottom: 1rem;
  99. }
  101. /* 初始化input */
  102. .login form fieldset input{
  103.     height: 1.5rem;
  104.     width: 13rem;
  105.     margin-left: 1rem;
  106.     border: none;
  107.     border-radius: 0.5em;
  108. }
  110. /* 设置input聚焦样式 */
  111. .login form fieldset input:focus{
  112.     box-shadow: 0 0 8px #888;
  113.     border: none;
  114. }
  116. /* 设置登陆框登录按钮样式 */
  117. .login form fieldset button{
  118.     height: 1.25rem;
  119.     width: 7.5rem;
  120.     border: none;
  121.     border-radius: 0.5em;
  122.     background-color: rgb(0,0,0,0.5);
  123.     color: white;
  124.     margin-left: 3.5rem;
  125.     margin-bottom: 1rem;
  126. }
  128. /* 为登录按钮添加样式 */
  129. .login form fieldset button:hover{
  130.     cursor: pointer;
  131.     background-color: orange;
  132.     transition: background-color 0.75s;
  133. }
  135. /* 默认隐藏登陆框 */
  136. .login{
  137.     display: none;
  138. }

效果

display1
display2

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！