Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 模态框练习
Blogger Information
Blog 19
fans 0
comment 0
visits 9870
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
模态框练习
newbie
Original
520 people have browsed it

模态框

内容

  1. 通过一个模态框的小项目将最近学习的一些知识练习一遍
  2. 基本实现了老师所讲的内容
  3. js代码引用的老师课件里的js

html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <script src="modal.js"></script>
  9.     <link rel="stylesheet" href="bd.css" />
  10. </head>
  11. <body>
  12.     <header>
  13.         <h2 class="title">许小可博客</h2>
  14.         <button onclick="showModal()">登录</button>
  15.     </header>
  16.     <!-- 模态框 -->
  17.     <div class="modal">
  18.    <!-- 设置一个半透明遮罩 -->
  19.         <div class="modal-bg" onclick="closeModal()"></div>
  20.      <!-- 表单部分    -->
  21.         <form class="modal-form">
  22.             <fieldset style="display: grid;gap: 1em">
  23.                 <legend>用户登录器</legend>
  24.                 <input type="text" name="usename" placeholder="请输入用户名或手机号" >
  25.                 <input type="password" name="password" placeholder="请输入密码">
  26.                 <input  type="email" name="email" placeholder="请输入email地址">
  27.                 <button>登录</button><button>注册</button>
  28.             </fieldset>
  29.         </form>
  30.     </div>
  31. </body>
  32. </html>

css代码

  1. <style>
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6.     /* 清除所有元素的外边距和内边距 
  7.     将盒子大小计算方式改为到盒子边框（不用考虑间距、边框等问题的影响） */
  8. }
  9. header {
  10.     background-color: lightskyblue;
  11.     padding: 0.5em 1em;
  12.     display: flex;
  13. }
  14. /* 设置头部的背景色和内边距并将布局模式调整为flex布局 */
  15. header button {
  16.     width: 3em;
  17.     height: 2em;
  18.     border: none;
  19.     background-color:antiquewhite;
  20.     margin-top: auto;
  21.     margin-bottom: auto;
  22.     margin-left: auto;
  23.     border-radius: 5px;
  24.     /* 设置一下头部登录按钮的参数让其居中并将边框样式设为圆角 */
  26. }
  27. header .title {
  28.     letter-spacing: 10px;
  29.     font-weight:bold;
  30.     font-size: 2em;
  31.     text-shadow: 10px 1px 10px cornsilk;
  32.     /* 设置头部标题的格式 */
  33. }
  34. header button:hover {
  35.     background-color: darksalmon;
  36.     box-shadow: 0px 0px 15px #ffffff;
  37.     color: #ffffff;
  38.     transition: 0.5s;
  39.     /* 通过设置头部登陆按钮的效果让其更美观
  40.         设置了当鼠标悬停时的效果
  41.         设置背景颜色
  42.         设置白色背影效果
  43.         设置字体颜色为白色
  44.         设置效果延迟时间
  45.      */
  46. }
  48. .modal .modal-form fieldset {
  49.     height: 20em;
  50.     background-color: rgb(188, 178, 243);
  51.     border: none;
  52.     padding: 1em 2em;
  53.     box-shadow: 0 0 5px rgb(5, 224, 188);
  54.     color: white;
  55.     /* 设置fieldset组合表单的参数
  56.        高度设置为20个字符大小（16*20）
  57.        设置背景色
  58.        取消边框显示
  59.        设置内边距为上下1个字符大小 左右2个字符大小
  60.        设置盒子阴影
  61.        字体颜色设为白色
  62.     */
  63. }
  64. .modal .modal-form fieldset legend {
  65.     text-align: center;     
  66.     border: none;
  67.     width: 70%;
  68.     background-color: rgb(68, 128, 206);
  69.     padding: 1em 1em;
  70.     /* 
  71.         设置legend表单标题的参数
  72.         设置字体居中
  73.         设置宽度为70%（根据父元素大小波动）
  74.         设置背景色
  75.         设置内边距
  76.     */
  78. }
  79. .modal .modal-form fieldset input {
  80.     outline: none;
  81.     color: rgb(168, 47, 162);
  82.     font-weight: bold;
  83.     height: 3em;
  84.     border: 2px solid #c179f1;
  85.     /* 
  86.         设置输入框的参数
  87.         取消输入框轮廓
  88.         设置字体颜色
  89.         设置字体格式
  90.         设置高度
  91.         设置一个新的边框样式
  92.     */
  94. }
  95. .modal .modal-form fieldset button {
  96.     color: #ffffff;
  97.     background-color: bisque;
  98.     border-radius: 5px;
  99.     height: 2em;
  100.     /* 
  101.         设置提交按钮的参数
  102.         设置字体为白色
  103.         设置背景色
  104.         设置边框为圆角
  105.         设置高度为2个字符大小
  106.     */
  108. }
  109. .modal .modal-form fieldset button:hover{
  110.     color: #7644eb;
  111.     background-color: rgb(226, 236, 236);
  112.     box-shadow: 0 0 5px red;
  113.     /* 
  114.         设置当鼠标悬停在提交按钮上时的参数
  115.         设置一个新的背景色
  116.         设置盒子阴影
  117.     */
  119. }    
  120. .modal .modal-form fieldset input:focus {
  121.     box-shadow: 0 0 15px #1100aa;
  122.     border: none;
  123.     /* 
  124.         设置当输入框获取到焦点时的参数
  125.         设置一个盒子阴影
  126.         取消边框显示
  127.     */
  128. }
  129. .modal .modal-form {
  130.     position:fixed;
  131.     top: 20%;
  132.     left: 30%;
  133.     right: 30%;
  134.     /* 
  135.         设置表单组件部分的参数
  136.         设置为绝对定位
  137.         设置具体的定位参数（让其随浏览器变化）
  138.     */
  139. }
  140. .modal .modal-bg {
  141.     position: fixed;
  142.     top: 0;
  143.     right: 0;
  144.     left: 0;
  145.     bottom: 0;
  146.     background-color: rgb(0, 0,0, 0.5);
  147.     /* 
  148.         设置半透明遮罩参数
  149.         设置绝对定位
  150.         定位到四个角 （全覆盖）
  151.         颜色设置为半透明
  152.     */
  153. }
  154. .modal {
  155.     display: none;
  156.     /* 
  157.         将整个模态框隐藏
  158.     */
  159. }

代码效果图片




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