ASCII码 ASCII码

简单模态框演示

发布于：2022-05-05 05:58:37  栏目：技术文档

1.模态框

1.效果图

1.

`

2.

2.代码

  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>
  9.     <link rel="stylesheet" href="作业.css">
  10. </head>
  11. <body>
  12.     <header>
  13.         <h1 class="title">xi-blog</h1>
  14.         <button onclick="showmodal()">登录</button>
  15.     </header>
  16.     <div class="modal">
  17. <div class="modal-bg" onclick="closemodal()"></div>
  18. <form action="" class="modal-form">
  19.     <fieldset  style="display: grid; gap: 1em">
  20.         <legend>登录</legend>
  22. <input type="text" name="user" placeholder="请输入用户名" required>
  23. <input type="email" name="email" placeholder="请输入邮箱" required>
  24. <input type="password" name="password" placeholder="请输入密码" required>
  25. <button>登录</button>
  26. <button>注册</button>
  28.     </fieldset>
  32. </form>
  34.     </div>
  35.     <script src="modal.js"></script>
  36. </body>
  37. </html>

css代码

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. header{
  8.     background-color: lightgreen;
  9.     padding: 1em 1em;
  10.     display: flex;
  11. }
  12. header .title{
  13.     font-size:x-large;
  14.     font-style: italic;
  15.     letter-spacing: 1px;
  16.     color: lightseagreen;
  17.     text-shadow: 1px 1px 1px black;
  19. }
  21. header button{
  22.     margin-left: auto;
  23.     border: none;
  24.     background-color: lightseagreen;
  25.     color: greenyellow;
  26.     width: 5em;
  27.     border-radius: 1em;
  28. }
  30. header button:hover{
  31.     cursor: pointer;
  32.     background-color: black;
  33.     color: white;
  34.     box-shadow: 0 0 3px black;
  35.     transition: 0.3s;
  36. }
  37. .modal .modal-form fieldset{
  38. padding: 2em 2em;
  39. background-color: lightgreen;
  40. height: 19em;
  41. border: 0;
  42. box-shadow: 0 0 10px lightseagreen;
  43. }
  44. .modal .modal-form fieldset legend{
  45.     background-color: lightseagreen;
  46.     color: rebeccapurple;
  47.     padding: 0.5em 1em;
  48. }
  50. .modal .modal-form fieldset input{
  51.     padding-left: 1em;
  52.     font-size: 0.7em;
  53.     outline: none;
  54.     height: 3em;
  56. }
  57. .modal .modal-form fieldset input:focus{
  58. background-color: black;
  59. color: white;
  60. border: 0;
  61. box-shadow:  0 0 2px red;
  62. }
  64. .modal .modal-form fieldset button{
  65.     background-color:black;
  66.     color: white;
  67.     border: 0;
  68.     height: 3em;
  69.     font-size: 10px;
  70. }
  71. .modal .modal-form fieldset button:hover{
  72.     cursor: pointer;
  73.     background-color: white;
  74.     color: black;
  76. }
  77.  /* 
  78.         设置表单组件部分的参数
  79.         设置为绝对定位
  80.         设置具体的定位参数（让其随浏览器变化）
  81.     */
  82. .modal .modal-form{
  83. position: fixed;
  84. top: 20%;
  85. left: 30%;
  86. right: 30%;
  87. }
  88.  /* 
  89.         设置半透明遮罩参数
  90.         设置绝对定位
  91.         定位到四个角 （全覆盖）
  92.         颜色设置为半透明
  93.     */
  94.  .modal .modal-bg{
  95.      position: fixed;
  96.      top: 0;
  97.      left: 0;
  98.      bottom: 0;
  99.      right: 0;
  100.      background-color: rgb(0,0,0,0.5);
  101.  }
  102.  /* 
  103.         将整个模态框隐藏
  104.     */
  105.  .modal{
  106.      display: none;
  107.  }

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码

人生就是一场修行