博主信息
博文 46
粉丝 0
评论 0
访问量 47582
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
模态框实例
上草一方
原创
667人浏览过

模态框实例

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. <script src="modal.js"></script>
  10. </head>
  11. <body>
  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-bg" onclick="closeModal()"></div>
  20. <!-- 2.弹层表单 -->
  21. <form action="" class="modal-form">
  22. <fieldset style="display: grid;gap: 1em;">
  23. <legend>用户登录</legend>
  24. <input type="email" name="email" placeholder="user@email.com">
  25. <input type="password" name="pwd" placeholder="不少于8位">
  26. <button>登录</button>
  27. </fieldset>
  28. </form>
  29. </div>
  30. </body>
  31. </html>

CSS代码如下:

  1. /* 初始化 */
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. }
  7. /* 头部样式 */
  8. header {
  9. background-color: lightseagreen;
  10. padding: 0.5em 1em;
  11. display: flex;
  12. }
  13. header .title{
  14. font-weight: lighter;
  15. font-style: italic;
  16. color: white;
  17. letter-spacing: 2px;
  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: 0.5em;
  26. }
  27. header button:hover{
  28. cursor: pointer;
  29. background-color:hotpink;
  30. color: #fff;
  31. box-shadow: 2px 2px 4px white;
  32. transition: 0.3s;
  33. }
  34. /* 模态框 */
  35. .modal .modal-form fieldset{
  36. height: 17.5em;
  37. background-color: lightcyan;
  38. border: none;
  39. padding: 2em 3em;
  40. box-shadow: 0 0 5px #888;
  41. }
  42. .modal .modal-form fieldset legend{
  43. padding: 7px 1.5em;
  44. background-color:aqua;
  45. color: #fff;
  46. border-radius: 5px;
  47. }
  48. .modal .modal-form fieldset input{
  49. height: 2.5em;
  50. padding-left: 1em;
  51. border: 1px solid #ddd;
  52. outline: none;
  53. font-size: 14px;
  54. }
  55. .modal .modal-form fieldset input:focus{
  56. box-shadow: 2px 2px 8px #888;
  57. border: none;
  58. }
  59. .modal .modal-form fieldset button{
  60. background-color: lightseagreen;
  61. color: #fff;
  62. border: none;
  63. height: 3em;
  64. font-size: 16px;
  65. height: 2.5em;
  66. border-radius: 5px;
  67. }
  68. .modal .modal-form fieldset button:hover{
  69. background-color: hotpink;
  70. cursor: pointer;
  71. box-shadow: 2px 2px 8px gray;
  72. }
  73. /* 定位 */
  74. .modal .modal-form{
  75. position: fixed;
  76. top: 10em;
  77. left: 30em;
  78. right: 30em;
  79. }
  80. /* 遮罩 */
  81. .modal .modal-bg{
  82. position: fixed;
  83. /* 坐标全部清零,请定位到四个顶点 */
  84. top: 0;
  85. left: 0;
  86. right: 0;
  87. bottom: 0;
  88. background-color:rgba(0,0,0,0.5);
  89. }
  90. .modal{
  91. display: none;
  92. }

运行效果图如下:

批改老师:PHPzPHPz

批改状态:合格

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

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

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