ASCII码 ASCII码

模态框练习

发布于：2022-03-27 12:30:25  栏目：技术文档

模态框

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="modal.css" />
  9.     </head>
  10.     <body>
  11.         <!-- 头部 -->
  12.         <header>
  13.             <h2 class="title">我的博客</h2>
  14.             <button onclick="showModal()">登录</button>
  15.         </header>
  16.         <!-- 模态框 -->
  17.         <div class="modal">
  18.             <!-- 1.半透明的遮罩 -->
  19.             <div class="modal-zz" onclick="closeModal()"></div>
  20.             <!-- 2.弹层表单 -->
  21.             <form action="" class="modal-form">
  22.                 <fieldset style="display: grid; gap: 1em">
  23.                     <legend>用户登录</legend>
  24.                     <input type="text" name="username" placeholder="请输入账号" required />
  25.                     <input type="password" name="password" placeholder="密码不少于6位" required />
  26.                     <button>登录</button>
  27.                 </fieldset>
  28.             </form>
  29.         </div>
  30.         <script src="modal.js"></script>
  31.     </body>
  32. </html>

css代码

  1. * {
  2.     margin: 0px;
  3.     padding: 0px;
  4.     box-sizing: border-box;
  5. }
  7. /* 头部标题 */
  9. header {
  10.     background-color: #666699;
  11.     padding: 0.5em 1em;
  12.     display: flex;
  13. }
  15. /* logo */
  16. header .title {
  17.     font-weight: bold;
  18.     font-style: italic;
  19.     color: white;
  20.     letter-spacing: 10px;
  21.     text-shadow: 1px 1px 1px #555;
  22. }
  24. /* 登录按钮 */
  25. header button {
  26.     margin-left: auto;
  27.     width: 5em;
  28.     border: none;
  29.     border-radius: 5px;
  30. }
  32. header button:hover {
  33.     cursor: pointer;
  34.     background-color: blue;
  35.     color: #fff;
  36.     box-shadow: 0 0 5px #fff;
  37.     transition: 0.3s;
  38. }
  40. header button:active {
  41.     cursor: pointer;
  42.     background-color: red;
  43.     color: #fff;
  44. }
  46. /* 模态框 */
  47. .modal .modal-form fieldset {
  48.     height: 15.5em;
  49.     background-color: lightcyan;
  50.     border: none;
  51.     padding: 2em 3em;
  52.     box-shadow: 0 0 5px #888;
  53. }
  55. /* 模态框表单标题 */
  56. .modal .modal-form fieldset legend {
  57.     padding: 7px 1.5em;
  58.     background-color: #009966;
  59.     color: white;
  60.     border-radius: 5px;
  61. }
  63. .modal .modal-form fieldset input {
  64.     height: 3em;
  65.     margin: 1px;
  66.     padding-left: 1em;
  67.     outline: none;
  68.     border: 1px solid #ddd;
  69.     font-size: 14px;
  70.     border-radius: 2px;
  71. }
  73. .modal .modal-form fieldset input:focus {
  74.     box-shadow: 1px 1px 5px #888;
  75.     border: none;
  76.     /* border: 1px solid blue; */
  77. }
  79. .modal .modal-form fieldset button {
  80.     background-color: #009966;
  81.     color: white;
  82.     border: none;
  83.     height: 3em;
  84.     font-size: 16px;
  85.     height: 2.5em;
  86.     border-radius: 5px;
  87. }
  89. .modal .modal-form fieldset button:hover {
  90.     background-color: coral;
  91.     transition: 0.3s;
  92.     cursor: pointer;
  93.     box-shadow: 0 0 5px #888;
  94. }
  96. /* 定位 */
  97. .modal .modal-form {
  98.     position: fixed;
  99.     top: 30vh;
  100.     left: 40vw;
  101.     right: 40vw;
  102.     width: 28em;
  103. }
  105. /* 遮罩 */
  106. .modal .modal-zz {
  107.     position: fixed;
  108.     top: 0;
  109.     right: 0;
  110.     bottom: 0;
  111.     left: 0;
  112.     background-color: rgba(0, 0, 0, 0.5);
  113. }
  115. .modal {
  116.     display: none;
  117. }

js代码

  1. function showModal() {
  2.     // 获取模态框元素
  3.     const modal = document.querySelector('.modal');
  5.     // 显示模态框
  6.     modal.style.display = 'block';
  8.     // 焦点自动置入第一个输入框email
  9.     modal.querySelector('input:first-of-type').focus();
  10. }
  12. function closeModal() {
  13.     // 获取模态框元素
  14.     const modal = document.querySelector('.modal');
  16.     // 关闭模态框
  17.     modal.style.display = 'none';
  18. }
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行