Javascript 使弹出窗口居中

我正在弹出一个用于facebook身份验证的窗口，我希望该页面的内容在弹出窗口中居中。我不是问如何在屏幕上居中弹出窗口。我在问如何在弹出窗口中居中页面。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>

$（“#facebook_按钮”）。单击（请求facebook授权）；
函数popupCenter（url、宽度、高度、名称）{
左侧变量=（屏幕宽度/2）-（宽度/2）；
var top=（屏幕高度/2）-（高度/2）；
返回窗口。打开（url，名称，“菜单栏=否，工具栏=否，状态=否，宽度=“+width+”，高度=“+height+”，工具栏=否，左=“+left+”，顶部=“+top”）；
}
函数ask\u for\u facebook\u auth（e）{
popupCenter（$（this.attr（“href”），$（this.attr（“数据宽度”），$（this.attr（“数据高度”），“authPopup”）；
e、 stopPropagation（）；返回false；
}

您需要使用

window.scrollTo（）

方法分别将视口居中于主体宽度/高度减去窗口内部宽度/内部高度的一半。这将实现您的目标：

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);
}

---

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

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;
        }

如果要使用idsimplemodal容器将div居中，请使用

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

---

这不是弹出窗口居中的一般解决方案，但它通过Facbook auth对话框解决了我的问题。你必须把

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

---

在您的初始值设定项/omniauth中，这样facebook将生成一个中心页面，在弹出窗口中看起来很漂亮。

如何共享弹出窗口中涉及的一些标记，这样我们就不必猜测您有什么。有时人们只是懒惰。好的答案需要好的问题…很抱歉，我添加了它。有没有办法从父窗口调用它？我不知道如何在子窗口上运行javascript，因为它是facebook的应用程序权限页面。不幸的是，如果您没有对其他域上的子页面的编辑权限，您将无法确定子窗口的宽度/高度，因此无法将父窗口置于其内容的中心。但是，Facebook可能支持某些querystring变量，这些变量定义了从外域加载的页面的宽度和高度，此时，您可以使用

popupName.scrollTo（）

根据您定义的宽度/高度滚动弹出窗口；w、 scrollTo（300,10），但它似乎没有任何效果。是的，您可能在这里看到了相同的原产地限制。