CSS&JavaScript&jQuery响应式弹窗实现

前端菜鸟，用三种方法写了一种响应式居中的弹窗效果，关闭按钮自行添加，这里没写。其中借鉴了一些别人的代码，80%的原创度。下面开始吧。

一、css

<button id="btn"></button>
<div id="wrap">
<div id="box"></div>
</div>

body{
  height:2000px;
}
#wrap{
  width:100%;
  max-width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  position:fixed;
  top:0;
  left:0;
}
#box{
  width:300px;
  height:300px;
  background-color:red;
}

注：css中运用到的知识点有flex布局，宽高百分比，固定定位。

二、JavaScript

 //窗口加载完毕后执行
        window.onload = function(){
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function(){
                pop();
            };
            //pop();
        };

        //滚动条发生变化时执行
        window.onscroll = function(){
            pop();
        };

        //窗口大小改变时执行
        window.onresize = function(){
            pop();
        };

        //弹窗事件
        function pop (){
            var scrollTop = document.body.scrollTop;//滚动条到顶部
            var oBox = document.getElementById('box');
            oBox.style.display = 'block';

            oBox.style.top=document.documentElement.clientHeight/2-oBox.offsetHeight/2+scrollTop+'px';
            oBox.style.left=document.documentElement.clientWidth/2-oBox.offsetWidth/2+'px';
        }

JavaScript中用到了函数的调用，以及元素页面宽高，滚动条高度等知识点。

三、jQuery

window.onload = function(){

            //点击按钮创建元素
            $('#btn').click(function(){

                var oBox = $('<div><span>X</span></div>');
                $('body').append(oBox);

                oBox.css('left',($(window).width()-oBox.outerWidth())/2);
                oBox.css('top',($(window).height()-oBox.outerHeight())/2);
                close();

           $(window).on('resize scroll', function(){
               oBox.css('left',($(window).width()-oBox.outerWidth())/2+$(window).scrollLeft());
               oBox.css('top',($(window).height()-oBox.outerHeight())/2+$(window).scrollTop());
               close();
           });

                //关闭按钮
                function close(){
                    $('span').click(function(){
                        oBox.css('display','none');
                    });
                }
            });

       };

jQuery用到了元素的创建，其余的和原生差不多。

后两种方法的核心思路就是触发一个事件函数时，元素绝对定位的top和left值始终等于窗口大小和元素宽高的差的二分之一再加上滚动条到页面顶部的距离。