登录  /  注册
博主信息
博文 48
粉丝 0
评论 3
访问量 55023
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
绝对定位与固定定位——模态框案例
江流
原创
1178人浏览过

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

页头部分

  • 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. }

页面加载效果:

点击登录按钮后效果:

点击模态框任意部分,取消登录,回到加载状态。

批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学