页面中最常用的弹框。自适应。适合移动端。

最新推荐文章于 2025-06-06 09:27:38 发布

WEB小牛

最新推荐文章于 2025-06-06 09:27:38 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

分类专栏：弹窗移动端设计文章标签：弹框对话框

本文链接：https://blog.youkuaiyun.com/hewu1122/article/details/50507323

弹窗同时被 2 个专栏收录

3 篇文章

订阅专栏

移动端设计

1 篇文章

订阅专栏

本文探讨了在弹框宽度为百分比且高度自适应的情况下，如何使其在页面中居中显示。通过分析窗口和页面的关系，以及考虑滚动条的影响，详细解释了计算弹框left和top值的方法，提供了实现弹框居中的思路和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们经常会很头疼如何实现一个对象自然的居中。正好显示在窗口的中间部分。我也是刚刚好好研究了一份。才发现这其中的奥妙。顿时觉得豁然开朗。
前提1：我们讨论的是当弹框的宽度为百分比，高度根据内容自适应，条件下。（我想大家肯定是先想了解这种情况下的内容）
思路：其实我们要想实现居中的效果，无非最主要的就是获得弹框定位的左边。我们的弹框一般是相对定位。那么我们如何获得弹框的left和top值呢。那么我们就需要能够获得弹框的高度和宽度。然后我们要了解窗口的宽度和高度。先上一张图来分析一下。
这里写图片描述
图中红色的为浏览器窗口。青色的为html页面。黑色的自然为弹框。我们需要获得的是弹框左上角的左边。但是我们现在应该改了解到我们的弹框是在哪里，弹框是在html页面里，所以我们我们弹框的参考对象是青色的html页面而非红色的浏览器窗口。（这是一个误区，需要区分）
接下来我们在看另一种情况。
这里写图片描述
上了这张图，我们先来分析top的值。当红色浏览器器窗口的高度值减去对话框高度除以2我们就得到了向上的黑色箭头的长度。然而这个高度并非是使得对话框居中的top值。我们看图的右边右上角，其中有一个小细节我们要知道就是当页面滚动出窗口的距离等于滚动条到顶部的距离。因为我们是参考的html页面，所以我们就必须要知道。这个出了页面的高度，就是滚动条到顶部的距离。也就是图中的A等于B。我们的top值也就是为 top=滚动条到顶部的距离+(窗口的高度-弹框的高度)/2
横向的道理是一样的。 left=滚动条到右边的距离+（窗口的宽度-弹框的宽度）/2
代码演示

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>弹框自适应居中</title>
    <style type="text/css">
      *{margin:0; padding:0; box-sizing:border-box;}
        #dd{ background-color:rgba(0,0,0,0.5); 
             position:fixed;  top:0; left:0; bottom:0; z-index:0;
                 width:100%;height:100%;
             }
   .main{height:3000px; width:100%; border:3px solid blue;}
     .myPopup{ width:80%; border:1px solid red;}

    </style>
 </head>
 <body>
    <div class="main"><!-- 页面信息部分 -->
            <p>mian高度给3000px，撑起主要页面</p>
        </div>
    <div id="dd">遮罩层</div>
        <div id="popup" class="myPopup">
                  <p>这里是一段信息。使得弹框的高度是自适应的高度。不给弹框设计高度。利用js来获取弹框高度</p>
                    <p>这里显示坐标数据<span id="position-data"></span></p>
             </div>
 </body>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript" >
        $(function() {  
          $(window).scroll(function(){  
              var point = getObjWh1( "popup" );  //定义一个函数，传入对象
              $('#position-data').html('x:'+point.x+',<br>y:'+point.y); //显示坐标数据，辅助作用开发可去掉
              $('#popup').css( { position: "absolute" , left: point.x , top:point.y  } );//确定弹框位置
          }); 
    });   
      function getObjWh1(obj){ 
                var point={};  //定义一个对象
          var st=$(document).scrollTop();//滚动条距顶部的距离  
          var sl= $(document).scrollLeft();//滚动条距左边的距离  
          var ch=$(window).height();//屏幕的高度  
          var cw=$(window).width();//屏幕的宽度  

          var objH=$("#"+obj).height();//弹框对象的高度  
          var objW=$("#"+obj).width();//弹框对象的宽度  
          var objT=Number(st)+(Number(ch)-Number(objH))/2;  
            //滚动条到顶部的距离+（屏幕的高度-弹框的高度）/2
          var objL=Number(sl)+(Number(cw)-Number(objW))/2;
            //滚动条到右边的距离+（屏幕的宽度-弹框的宽度）/2
          point.x = objL ;  
          point.y = objT;    
          return point;  //返回对象，把左边值返回出去
    }
</script>
</html>

效果图：
这里写图片描述

好了，不知道大家有没有听懂。如果懂了的话我想纠正我的一个说法。上面那样说主要是为了便于理解。就是我们滚动条滚出窗口的距离不是与顶部的距离相等。而是百分比相等。

前提2：对话框的宽度高度确定。
这个方法很简单。只需要用css就可以来确定位置。假设弹框的id值为popup。那么我们直接写样式。(假设宽度为600px；高度为800px；)

#popup{position:absolute; top:50%; left:50%; margin-left:-300px;margin-top:-400px;}