Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 模态框的练习
Blogger Information
Blog 17
fans 0
comment 0
visits 8265
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
模态框的练习
想做一个躺平的程序员
Original
322 people have browsed it

模态框演示

代码部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>模态框的实现</title>   
  7.     <style>
  9.        body{
  10.            height: 2000px;
  11.        }
  12.        .header{
  13.            /* 布局设置为弹性布局  设置背景颜色*/
  14.            background-color: teal;
  15.            display: flex; 
  16.        }
  18.        .header .header-title{
  19.            /*字体颜色为白色 字体加粗  选定的字体*/
  20.             color: azure;
  21.             font-weight: bold; 
  22.             font-family: serif;
  24.        }
  25.         /* 登录 */
  26.        .header .header-login{
  27.            /*左外边框自动 边框的半径1em 外边框上下为auto 宽和高为合适*/
  28.            margin-left: auto;
  29.            border-radius: .8em;
  30.            border: none;
  31.            margin-top: auto;
  32.            margin-bottom: auto;
  33.             width: 66px;
  34.             height: 35px;
  36.        }
  37.        /* 登录按钮选中的状态 */
  38.        .header>.header-login:hover{
  39.            background-color: darkturquoise;
  40.             /* box-shadow: 右边 下边  阴影的尺寸  颜色 */
  41.            box-shadow: 1px 1px 10px darkcyan;
  42.        }    
  43.        .model .model-form .model-form-fieldset{
  44.            width: 15em;
  45.            background-color:rgba(63, 222, 243, 0.8);
  46.            border-radius: .4em;
  47.        }
  48.        .model .model-form .model-form-fieldset legend{
  49.            background-color: aliceblue;
  50.            color:skyblue;
  51.        }
  52.        .model .model-form .model-form-fieldset>input{
  53.            height: 2.5em;
  55.        }
  56.         /* 表单控件获取焦点的时候 */
  57.        .model .model-form .model-form-fieldset>input:focus {
  58.           box-shadow: 1em 1em 5em rgb(39, 163, 111);
  59.        }
  60.        .model .model-form .model-form-fieldset>button{
  61.            /* 宽度为5em 高度为2em 边框半径为.3em 左外边距为6em 
  62.            背景颜色为 aqua 字体加粗程度为600 字体类型 Arial, Helvetica, sans-serif;*/
  63.            width: 5em;
  64.            height: 2em;
  65.            border-radius: .3em;
  66.            margin-left: 6em;
  67.            background-color: aqua;
  68.            font-weight: 600;
  69.            font-family: Arial, Helvetica, sans-serif;
  70.        }
  71.        /* 弹出登录表单时的遮罩 */
  72.        .model >.model-bg{
  73.             /* 固定定位  定位到视图中的四个点
  74.                 背景颜色设置为 rgba模式 0.6透明状态
  75.             */
  76.             position: fixed;
  77.             top: 0;
  78.             left: 0;
  79.             right: 0;
  80.             bottom: 0;
  81.             background-color: rgba(0, 0, 0, 0.6);
  84.        }
  86.          /* 表单定位 */
  87.         .model .model-form {         
  88.            /*固定定位 距离头部的距离为15em ，左边距离为41em*/       
  89.            position: fixed;  
  90.            top:15em;
  91.            left: 37em;                                     
  92.        }
  93.        .model{
  94.           display: none;
  96.        }
  100.     </style>
  101. </head>
  102. <body>
  103.     <div>
  104.         <div>
  105.             <header class="header">
  106.                 <h2 class="header-title">想做一个躺平的程序员</h2>
  107.                 <button class="header-login" onclick="showModel()">登陆</button>
  108.             </header>
  109.         </div>
  110.             <!-- 模态框 -->
  111.         <div class="model">
  112.                 <!-- 半遮罩 -->
  113.                 <div class="model-bg" onclick="closeModel()"></div>
  114.                 <!-- 弹层表单 -->
  115.                 <form class="model-form" action="xxx" method="POST">
  116.                     <fieldset class="model-form-fieldset" style="display: grid;"  >
  117.                         <legend>用户登录</legend>
  118.                         <label for="username">用户名:</label>
  119.                         <input type="text" name="username" id="username" placeholder="输入的用户名不少于两位" required>
  120.                         <br>
  121.                         <label for="psw">密码:</label>
  122.                         <input type="password" id="psw"  name="psw" placeholder="输入的密码不少于16位" required >
  123.                         <br>
  124.                         <button type="submit">登录</button>
  125.                     </fieldset>
  127.                 </form>
  128.         </div>
  129.     </div>
  133. </body>
  134. <script>
  136.          function   showModel(){
  137.             //  获取模态框的元素
  138.            var model =document.querySelector(".model");
  139.             //显示模态框
  140.            model.style.display="block";
  144.          }
  146.          function  closeModel(){
  147.              //获取模态框的元素
  148.              var model=document.querySelector(".model");
  149.                 // 关闭模态框
  150.              model.style.display='none';
  151.          } 
  152. </script>
  153. </html>

页面效果如下：

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