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

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


<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+',
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>

效果图:
页面中最常用的弹框。自适应。适合移动端。_第3张图片

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

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

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

你可能感兴趣的:(弹窗,移动端设计)