博客列表 >模态框练习

模态框练习

天宁
天宁原创
2022年03月28日 00:00:04491浏览

模态框

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

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. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议