javascript - 仅当滚动条位于顶部时,模态弹出才会显示在中心

标签 javascript php jquery html css

我正在使用模态弹出窗口,无论滚动条是在顶部还是底部,它都不会显示在中心。我总是希望它在中心呈现,这样用户就不需要滚动来查看弹出的模式。以下是我正在使用的代码:

CSS:

table {
    border-collapse:separate;
    border-spacing:0pt;
}

caption, th, td {
    font-weight:normal;
    text-align:left;
}

blockquote:before, blockquote:after, q:before, q:after {
    content:"";
}

blockquote, q {
    quotes:"" "";
}

a {
    cursor: pointer;
    text-decoration:none;
}

br.both {
    clear:both;
}

#backgroundPopup {
    display:none;
    position:fixed;
    _position:absolute; /* hack for internet explorer 6*/
    height:100%;
    width:100%;
    top:0;
    left:0;
    background:#000000;
    border:1px solid #cecece;
    z-index:1;
}

#popupContact {
    display:none;
    position:fixed;
    _position:absolute; /* hack for internet explorer 6*/
    height:384px;
    width:408px;
    background:#FFFFFF;
    border:2px solid #cecece;
    z-index:2;
    padding:12px;
    font-size:13px;
}

#popupContact h1 {
    text-align:left;
    color:#6FA5FD;
    font-size:22px;
    font-weight:700;
    border-bottom:1px dotted #D3D3D3;
    padding-bottom:2px;
    margin-bottom:20px;
}

#popupContactClose {
    font-size:14px;
    line-height:14px;
    right:6px;
    top:4px;
    position:absolute;
    color:#6fa5fd;
    font-weight:700;
    display:block;
}

#button {
    text-align:center;
    margin:100px;
}

JavaScript:

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}

//disabling popup with jQuery magic!
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

//centering popup
function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    //centering
    $("#popupContact").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6

    $("#backgroundPopup").css({
        "height": windowHeight
    });

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

    //LOADING POPUP
    //Click the button event!


    $(document.body).on('click', '.flag_icons' ,function(e){
    //$('.flag_icon').click(function(){
        //centering with css
        centerPopup();
        //load popup
        loadPopup();
    });

    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose").click(function(){
        disablePopup();
    });
    //Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup();
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
        }
    });
});

HTML:

<div id="popupContact">
        <a id="popupContactClose">x</a>
        <h1> Modal Popup Rendered </h1>
        <p id="contactArea">
         </form>
        </p>
</div>
<div id="backgroundPopup"></div>

最佳答案

代替 top:0 left:0 使用:

#backgroundPopup{
display:none;
position:fixed;
height:100%;
width:100%;
top:50%;
left:50%;
background:#000000;
border:1px solid #cecece;
z-index:1;
}

顶部:50%; 左:50%;

无论如何都将元素保持在页面的中心。

关于javascript - 仅当滚动条位于顶部时,模态弹出才会显示在中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30380690/

相关文章:

javascript - 从标签比较中获取 json id

javascript - 从 anchor 标记获取元素 id 并替换 href

javascript - ELI5 包含一个 npm 包

javascript - 我已将嵌套 Json 数据存储在变量中,如何在 jquery 的另一个函数中访问它们?

javascript - 根据是否选中复选框使用 jQuery 附加 URL

php - 使用 PHP 调用 C# Web 服务

javascript - jQuery 跨域 ajax 调用 - 解释为脚本,但使用 MIME 类型 text/xml 进行传输

javascript - 单击更改图标并通过 javascript 添加 css 类

php - 如何在 PhalconPHP 中运行 RAW SQL 查询

php - 在 Twig 中使用命名空间别名