欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

绝对定位与固定定位——模态框案例

程序员文章站 2022-03-24 09:32:48
...

登录是使用遮罩功能——模态框

页头部分

  • html:
    1. <header>
    2. <h2>我的博客</h2>
    3. <button onclick="document.querySelector('.modal').style.display='block'">
    4. 登录
    5. </button>
    6. </header>
  • css
    1. * {
    2. margin: 0;
    3. padding: 0;
    4. box-sizing: border-box;
    5. }
    6. body {
    7. background-color: #eee;
    8. }
    9. header {
    10. background-color: lightseagreen;
    11. padding: 0.5em 1em;
    12. display: flex;
    13. }
    14. header button {
    15. margin-left: auto;
    16. width: 4em;
    17. }

    模态框部分

  • html:
  1. <div class="modal">
  2. <!-- 半透明的遮罩 -->
  3. <div
  4. class="modal-bg"
  5. onclick="this.parentNode.style.display='none'"
  6. ></div>
  7. <form action="" class="modal-form">
  8. <fieldset>
  9. <legend>用户登录</legend>
  10. <div>
  11. <label for=""> 用户名: </label>
  12. <input type="text" />
  13. </div>
  14. <div>
  15. <label for="">密码:</label>
  16. <input type="password" />
  17. </div>
  18. <div><button>登录</button></div>
  19. </fieldset>
  20. </form>
  21. </div>
  • CSS:
  1. .modal {
  2. position: relative;
  3. }
  4. .modal .modal-form fieldset {
  5. background-color: lightcyan;
  6. border: none;
  7. padding: 2em;
  8. box-shadow: 0 0 5px #888;
  9. }
  10. .modal .modal-form fieldset legend {
  11. padding: 5px 1em;
  12. background-color: rebeccapurple;
  13. color: white;
  14. }
  15. .modal .modal-form {
  16. position: fixed;
  17. top: 10em;
  18. left: 20em;
  19. right: 20em;
  20. }
  21. .modal .modal-bg {
  22. position: fixed;
  23. top: 0;
  24. right: 0;
  25. bottom: 0;
  26. left: 0;
  27. background-color: rgb(0, 0, 0, 0.5);
  28. }
  29. .modal {
  30. display: none;
  31. }

页面加载效果:
绝对定位与固定定位——模态框案例
点击登录按钮后效果:
绝对定位与固定定位——模态框案例
点击模态框任意部分,取消登录,回到加载状态。