弹框在当前屏幕完全居中的方法

最近弹框需求越来越多了, 需要在当前屏幕自适应居中, 这就得获取浏览器中的各项高度,才能使弹框在当前屏幕一直居中.

1.css直接点,推荐我自己使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .newpop {
                width: 100%;
                height: 100%;
                margin: 0 auto;
                display: none;
            }

            .newpopbg {
                width: 100%;
                height: 100%;
                /*兼容IE8及以下版本浏览器*/
                filter: alpha(opacity = 30);
                position: fixed;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: 0 auto;
                z-index: 999998;
                background-color: #666666;
                -webkit-opacity: 0.5;
                -moz-opacity: 0.5;
                -khtml-opacity: 0.5;
                opacity: 0.5;
                filter: alpha(opacity = 50);
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
            }
            
            .newpop .newpopcon {
                width: 472px;
                height: 280px;
                min-height: 200px;
                   max-height: 500px;/*设定最大最小高度,在这个之间的高度可以自适应*/
                position: fixed;
                background-color: #fff;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                margin: auto;
                text-align: center;
                z-index: 999999;
            }
            
            .newpop .newpopcon h3 {
                background: #f87c06;
                margin: 0;
                line-height: 54px;
                color: #fff;
                text-align: center;
            }
            .newpop .newpopcon input {
                cursor: pointer;
                background-color: #fff;
                color: #8a8a8a;
                border: 1px solid #c5c5c7;
                width: 102px;
                height: 40px;
                line-height: 40px;
                border-radius: 5px;
                -moz-border-radius: 5px;
            }

        </style>
    </head>
    <body>
        
        <div id="newPop" class="newpop" style="display: block;">
            <div class="newpopbg"></div>
            <div class="newpopcon" >
                 <h3>提示</h3>
                 <p>内容</p>
                 <p>内容</p>
                 <p>内容</p>
                 <div class="newpop-btn">
                    <input type="button" class="newpop-btnl" value="取消">
                    <input type="button" class="newpop-btnr" value="确定">
                 </div>
            </div>
        </div>
    </body>
</html>

2.使用js之后,发现仅仅把css中的 'position:absolute;'改成 'position: fixed;right:0;left:0;top:0;bottom:0;'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .pop-up{
            display: none;
            width: 100%;
            height: 100%;
            color: #333;
        }
        
        .pop-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #666666;
            -webkit-opacity: 0.5;
            -moz-opacity: 0.5;
            -khtml-opacity: 0.5;
            opacity: 0.5;
            filter: alpha(opacity = 50);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
            z-index: 100000;
        }
        
        .pop-contain {
            position: absolute;
            display: none;
            z-index: 100001;
            width: 526px;
            min-height: 20px;
            max-height: 400px;
            margin: auto;
            overflow: auto;
        }
        .pop-contain .pop-son-contain{
            background: #fff;
            padding-bottom: 80px;
        }
        .pop-contain .pop-title {
            text-align: center;
            font-weight: 0;
            position: relative;
            font-size: 22px;
            line-height: 60px;
            color: #333;
            border-bottom: 1px solid #eee;
            background: #f8f8f8;
        }
        
        .pop-contain .pop-title span {
            position: absolute;
            top: 18px;
            right: 10px;
            width: 30px;
            line-height: 26px;
            height: 30px;
            text-align: center;
            cursor: pointer;
        }
        .pop-tip-text{
            width: 80%;
            margin: 40px auto 40px;
            line-height:30px;
            color: #333;
            font-size:16px;
        }
        .pop-tip-text p{
            font-size:18px;
            color:#000;
            margin: auto;
        }
        .pop-tip-btn{
            text-align: center;
        }
        .pop-tip-btn input{
            padding:0 42px;
            height: 40px;
            line-height: 40px;
            border: none;
            border: none;
            background: #52a9f2;
            color: #fff;
            font-size:14px;
            cursor: pointer;
        } 
   </style>
</head>
<body>


<input type="button" value="点击弹框" onclick="checkForm()" style="font-size: 30px; padding: 10px 20px;"/>
<div id="checkFormPopHtml" class="pop-up">
        <div class="pop-bg"></div>
        <div class="pop-contain" id="pop-contain">
            <div class="pop-son-contain">
                <div class="pop-title">
                    提示
                 <span id="offPop" onclick ="clikcNone()">&#10005</span>
                </div> 
                <div class="pop-tip-btn">
                    <input type="button" id="popSurebtn" style="cursor:pointer" value="确定" onclick ="clikcNone()" />
                </div>
            </div> 

        </div>
    </div> 




<script src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">
       //调整重加弹框居中开始
    function leftTop(obj){
        var screenWidth = $(window).width();
        var screenHeight = $(window).height();
        var scrolltop = $(document).scrollTop();
        var scrollleft = $(document).scrollLeft();
        var objLeft = (screenWidth - obj.width())/2 + scrollleft  ;
        var objTop = (screenHeight - obj.height())/2 + scrolltop;
        obj.css({left: objLeft + 'px', top: objTop + 'px'});
       // $("body").css({"overflow":"hidden","height":"100%"})
    }
    
    function center(obj) {
        leftTop(obj);
        //浏览器窗口大小改变时
        $(window).resize(function() {
            leftTop(obj);
        });
        //浏览器有滚动条时的操作、
        $(window).scroll(function() {
            leftTop(obj);
        });
    }
    //显示函数
    function clikcShow(){
        $('#checkFormPopHtml').css("display","block");//显示总弹框父元素
        center($("#pop-contain"));//再调用弹框居中
        $('#pop-contain').css("display","block");//然后显示弹框
    }
    //调整重加弹框居中结束
    
    function clikcNone(){
      $('#checkFormPopHtml,#pop-contain').css('display','none');
    }

    function checkForm(){
        clikcShow();
    }
    </script>
</body>
</html>