经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
css实现弹窗上下左右居中且背景透明锁定窗口效果_CSS教程_CSS
来源:jb51  时间:2020/12/28 9:30:15  对本文有异议

有一种简单的css方法实现点击之后的弹出框上下左右居中且附加灰色透明遮罩锁定窗口清除滚动条

在这里插入图片描述

html代码

  1. <div class="box">
  2. <div class="boxs">
  3. <!-- 白色弹窗 -->
  4. </div>
  5. </div>

css代码

  1. html, body {
  2. width: 100%;
  3. height: 100%;
  4. }
  5. .box {
  6. display: none;
  7. width: 100%;
  8. height: 100%;
  9. position: fixed;
  10. left:0;
  11. top:0;
  12. background-color:rgba(0,0,0,0.5);
  13. }
  14. .boxs {
  15. width: 400px;
  16. height: 300px;
  17. background: #fff;
  18. box-shadow: 1px 7px 18px 0px rgba(84, 115, 128, 0.11);
  19. border-radius: 4px;
  20. cursor: pointer;
  21. position: absolute;
  22. left: 50%;
  23. top: 50%;
  24. margin-top: -150px;
  25. margin-left: -200px;
  26. }

使用position:fixed固定透明背景元素,可以有效锁定窗口防止滚动条滚动,且可以利用定位在父元素内部实现子元素上下左右居中。至于弹出操作只需把点击事件和外层div的display属性的none以及block联动起来即可。

到此这篇关于css实现弹窗上下左右居中且背景透明锁定窗口的文章就介绍到这了,更多相关css弹窗居中背景透明锁定窗口内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号