Question

我正在弹出一个用于facebook身份验证的窗口，我希望该页面的内容在弹出窗口中居中。我 NOT 询问如何将弹出窗口置于屏幕中心。我问如何在弹出窗口中居中页面。 Javascript没问题。

<a href="/auth/facebook" id="facebook_button" data-width="800" data-height="400">

<script>
$("#facebook_button").click(ask_for_facebook_auth);

function popupCenter(url, width, height, name) {
    var left = (screen.width/2)-(width/2);
    var top = (screen.height/2)-(height/2);
    return window.open(url, name, "menubar=no,toolbar=no,status=no,width="+width+",height="+height+",toolbar=no,left="+left+",top="+top);
}

function ask_for_facebook_auth(e){
    popupCenter($(this).attr("href"), $(this).attr("data-width"), $(this).attr("data-height"), "authPopup");
    e.stopPropagation(); return false;
}
</script>

Answer 1

您将需要使用window.scrollTo()方法将视口居中放在身体宽度/高度的一半减去窗口innerWidth / innerHeight的一半。这应该完成你所追求的目标：

window.onload = function() {
    var w = window.innerWidth * 0.5;
    var h = window.innerHeight * 0.5;
    var x = document.body.clientWidth * 0.5 - w;
    var y = document.body.clientHeight * 0.5 - h;
    window.scrollTo(x,y);
}

Answer 2

使用此功能使弹出窗口居中。

jQuery.fn.center = function () {
            this.css("position","absolute");
            this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
            this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
            return this;
        }

如果您想以id simplemodal-container 为中心div，请使用

   $('#simplemodal-container').center();

Answer 3

这不是弹出中心的一般解决方案，但它解决了我使用facbeook auth对话框的问题。你必须把

config.omniauth :facebook, APP_ID, APP_SECRET, { :display => 'popup' }

在你的初始化器/ omniauth中

，这样facebook就会生成一个在弹出窗口中看起来不错的居中页面。

使弹出窗口居中

3 个答案: