博主信息
博文 33
粉丝 0
评论 0
访问量 24997
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
模态框的实例演示
lucaslwk
原创
555人浏览过

模态框的实例演示

实现效果

模态框1
模态框2

关键代码

html

  1. <header>
  2. <h1 class="title">XXX信息管理系统</h1>
  3. <button onclick="showModal()">关于</button>
  4. </header>
  5. <div class="modal">
  6. <div class="modal-background" onclick="closeModal()"></div>
  7. <div class="modal-about">
  8. <h2 class="ma-title">关于</h2>
  9. <div class="content">
  10. <p>系统版本号:V1.0</p>
  11. <p>公司:XXX信息管理公司</p>
  12. <p>
  13. 公司网址:
  14. <a href="https://baidu.com" target="_blank">https://baidu.com</a>
  15. </p>
  16. <p>售后电话:XXX-XXX-XXX</p>
  17. </div>
  18. </div>
  19. </div>

css

  1. /* 样式初始化 */
  2. * {
  3. padding: 0;
  4. margin: 0;
  5. box-sizing: border-box;
  6. }
  7. /* 头部样式 */
  8. header {
  9. display: flex;
  10. background-color: cornflowerblue;
  11. padding: 0.5rem 1rem;
  12. }
  13. header > h1.title {
  14. font-size: 1rem;
  15. font-weight: normal;
  16. font-style: oblique;
  17. color: aliceblue;
  18. letter-spacing: 0.1rem;
  19. text-shadow: 1px 1px 2px #000;
  20. }
  21. header > button {
  22. margin-left: auto;
  23. width: 3rem;
  24. border: none;
  25. border-radius: 0.3rem;
  26. background-color: aliceblue;
  27. }
  28. /* 选择鼠标移到button上的样式 */
  29. header > button:hover {
  30. /* 光标属性,move,text,wait,help */
  31. cursor: pointer;
  32. margin-left: auto;
  33. width: 3rem;
  34. border: none;
  35. color: aliceblue;
  36. border-radius: 0.3rem;
  37. background-color: darkseagreen;
  38. box-shadow: 0 0 10px #fff;
  39. }
  40. /* 模态框样式 */
  41. .modal .modal-about {
  42. border: 1px solid #fff;
  43. width: 15rem;
  44. box-shadow: 5px 5px 10px #000;
  45. }
  46. .modal .modal-about > h2 {
  47. font-size: 1.25rem;
  48. background-color: cornflowerblue;
  49. color: aliceblue;
  50. padding: 0.5rem 1rem;
  51. }
  52. .modal .content {
  53. background-color: aliceblue;
  54. padding: 0.5rem 1rem;
  55. font-weight: lighter;
  56. }
  57. /* 遮罩 */
  58. .modal .modal-background {
  59. position: fixed;
  60. top: 0;
  61. right: 0;
  62. bottom: 0;
  63. left: 0;
  64. background-color: rgb(0, 0, 0, 0.5);
  65. }
  66. /* 定位 */
  67. .modal .modal-about {
  68. position: fixed;
  69. top: 30vh;
  70. left: 50%;
  71. right: 50%;
  72. /* 水平居中垂直 */
  73. transform: translate(-50%, -50%);
  74. }
  75. .modal {
  76. display: none;
  77. }
批改老师: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+教程免费学