CSS面试题(一)-如何实现弹窗居中功能？

最新推荐文章于 2021-08-03 21:27:08 发布

优亿网络工作室

最新推荐文章于 2021-08-03 21:27:08 发布

阅读量909

点赞数

分类专栏： CSS 文章标签： CSS 弹窗

本文链接：https://blog.csdn.net/Zhu_Pc/article/details/79689561

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

面试中，面试官可能经常问到我们如何在高度宽度不一定，不能使用JS下实现一个弹窗功能，下面我将贴出一个常见的实现方法:主要实现思路为：使用伪类元素是实现居中，该方法优点是可以被body包裹的任意位置使用，缺点是IE9以下不支持。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS面试题(一)-如何实现弹窗居中功能？</title>
</head>
<style>
/*以下方法只对IE9以上有效,并且可以放在任何位置*/
.outer:before{/*使用伪类元素,after 和before都行*/
    content:"";
    height:100%;
    display:inline-block;
    vertical-align:middle;
  }
  .outer{
    position: fixed;
    left: 0px;
    right: 0px;
    top:0px;
    bottom:0px;
    background-color: rgba(0,0,0,0.4);z-index:9999;
    text-align: center;/**使内联元素居中**/
  }
  .inner{
    background: #fff;
    display:inline-block;/*设置为内联元素*/
  }
  .title{
    padding: 20px;
    text-align: center;
  }
  .detail{
    padding: 30px;
    text-align: center;
    border-top:1px solid #999;
  }
</style>
<body>
    <div class="outer">
      <div class="inner">
        <div class="title">提示信息</div>
        <div class="detail">弹窗成功</div>
      </div>
    </div>
</body>
</html>

优亿网络工作室

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS面试题(一)-如何实现弹窗居中功能？

面试中，面试官可能经常问到我们如何在高度宽度不一定，不能使用JS下实现一个弹窗功能，下面我将贴出一个常见的实现方法:主要实现思路为：使用伪类元素是实现居中，该方法优点是可以被body包裹的任意位置使用，缺点是IE9以下不支持。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;ti...
复制链接

扫一扫

专栏目录