Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 简写一个模态框
Blogger Information
Blog 7
fans 0
comment 0
visits 5460
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
549 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.     <!-- <style>
  9.         @import url(./static/demo3.css);
  10.     </style> -->
  11.     <link rel="stylesheet" href="./static/demo3.css">
  13. </head>
  14. <body>
  15.     <header>
  16.         <h2 class="title">可可西里</h2>
  17.         <button onclick="showLoginview()">登陆</button>
  18.     </header>
  20.     <!-- 模态框 -->
  21.     <div class="model">
  22.         <!-- 1、半透明背景 -->
  23.         <div class="model-bg" onclick="closeModel()"></div>
  24.         <!-- 2、登陆表单 -->
  25.         <form action="" class="model-form">
  26.             <fieldset>
  27.                 <legend>用户登陆</legend>
  28.                 <input type="email" placeholder="user@email.com">
  29.                 <input type="password" placeholder="不少于6位">
  30.                 <button>登陆</button>
  31.             </fieldset>
  32.         </form>
  33.         <script src="./static/demo3.js"></script>
  34.     </div>
  35. </body>
  36. </html>

二、css代码

  1.  /* 初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   /* 盒模型的计算方式：边距，边框全部计算在盒模型内 */
  6.   font-size: border-box;
  7. }
  9. /* 头部样式 */
  10. header {
  11.   background: rgb(80, 175, 108);
  12.   padding: 0.5em 1em;
  13.   display: flex;
  14. }
  16. /* 头部标题 */
  17. header .title {
  18.   font-weight: 300;
  19.   /* normal - 文字正常显示、italic - 文本以斜体显示 */
  20.   font-style: italic;
  21.   color: #fff;
  22.   /* 字间距 */
  23.   letter-spacing: 0.2rem;
  24.   /* 字体阴影 :向右，向下，模糊半径，颜色*/
  25.   text-shadow: 1px 2px 3px rgb(207 39 47);
  26. }
  28. /* 头部登陆按钮 */
  29. header button {
  30.   /* auto 浏览器自动计算距离 */
  31.   /* margin-left: auto;
  32.      居中：margin:0 auto;   或者: margin-left:auto; margin-right:auto;
  33.   */
  34.   margin: 0 0.5rem 0 auto;
  35.   width: 5em;
  36.   /* 无边框 ：去除边框样式*/
  37.   border: none;
  38.   border-radius: 0.5em;
  39. }
  41. /* 登陆按钮点击特效 */
  42. header button:hover {
  43.   /* 鼠标状态样式：手 */
  44.   cursor: pointer;
  45.   width: 5.1em;
  46.   background-color: pink;
  47.   color: #fff;
  48.   /* 盒子加阴影：向右，向下，模糊半径，颜色 */
  49.   box-shadow: 0 0 8px rgb(217, 238, 25);
  50.   /* 加载过度动画 */
  51.   transition: 0.3s;
  52. }
  54. /* 模态框 */
  56. .model .model-form fieldset {
  57.   display: grid;
  58.   gap: 1em;
  59.   height: 15.5em;
  60.   background-color: lightcyan;
  61.   color: #fff;
  62.   border: none;
  63.   padding: 2em 3em;
  64.   box-shadow: 0 0 8px #888;
  65. }
  67. /* 模态框表单标题 */
  68. .model .model-form fieldset legend {
  69.   padding: 7px 1.5em;
  70.   background-color: rgb(80, 175, 108);
  71.   color: #fff;
  72.   font-weight: 400;
  73.   /* 字体间距：letter-spacing */
  74.   letter-spacing: 2px;
  75. }
  77. /* 模态框-输入框样式 */
  78. .model .model-form fieldset input {
  79.   height: 3em;
  80.   padding-left: 1em;
  81.   /* 去掉轮廓线 */
  82.   outline: none;
  83.   border: 1px solid #ddd;
  84.   border-radius: 0.5em;
  85.   font-size: 14px;
  86. }
  88. /* 模态框-输入框聚焦样式 */
  89. .model .model-form fieldset input:focus {
  90.   border-color: #f0f0f0;
  91.   box-shadow: 0 0 5px yellow;
  92. }
  94. /* 模态框-登陆按钮样式 */
  95. .model .model-form fieldset button {
  96.   background-color: lightseagreen;
  97.   border: none;
  98.   border-radius: 0.5em;
  99.   font-size: 16px;
  100.   height: 2.5em;
  101.   color: #fff;
  102. }
  104. /* 模态框-登陆按钮点击样式 */
  105. .model .model-form fieldset button:hover {
  106.   background-color: rgb(76, 204, 64);
  107.   /* 鼠标样式：手 */
  108.   cursor: pointer;
  109.   box-shadow: 0 0 5px yellow;
  110.   /* 加载过度时间 */
  111.   transition: 0.3s;
  112. }
  114. /* 定位-模态框定位 */
  115. .model .model-form {
  116.   position: fixed;
  117.   top: 10em;
  118.   left: 38em;
  119.   right: 38em;
  120. }
  122. /* 定位-遮罩定位 */
  123. .model .model-bg {
  124.   position: fixed;
  125.   /* 坐标全部清零，定位到四个顶点 */
  126.   top: 0;
  127.   left: 0;
  128.   right: 0;
  129.   bottom: 0;
  130.   background-color: rgb(0, 0, 0, 0.5);
  131. }
  133. /*  模态框-登陆页面初始化隐藏 */
  134. .model {
  135.   display: none;
  136. }

三、js代码

  1.   function showLoginview() {
  2.     // 获取模态框class元素
  3.     const mod = document.querySelector('.model');
  5.     // 显示模态框登陆页面
  6.     mod.style.display = 'block';
  8.     // 自动聚焦第一个输入框
  9.     mod.querySelector('input:first-of-type').focus();
  10. }
  12. //遮罩任意处关闭模态框
  13. function closeModel() {
  14.     // 获取模态框元素
  15.     const mod = document.querySelector('.model');
  17.     // 关闭模态框
  18.     mod.style.display = 'none';
  19. }

演示：
00

01

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