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

css代码

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

js 代码

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