使弹出窗口为中心

我弹出一个窗口进行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>

来源

2012-02-07 stackOverlord

如何分享弹出窗口中涉及的某些标记，以便我们不必猜测您拥有什么。 – Gabe 2012-02-07 02:21:44

有时候人们只是懒惰。好的问题需要好的答案... – elclanrs 2012-02-07 02:26:58

对不起，我添加了它。 – stackOverlord 2012-02-07 02:34:26

这并不是弹出中心的通用解决方案，但它解决了我的问题与facbeook AUTH对话。你必须把

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

在初始化/ omniauth使Facebook将产生一个居中页面看起来不错的弹出窗口。

来源

2012-02-07 22:19:10 stackOverlord

你想使用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); 
}

来源

2012-02-07 02:28:24 Aaron

有什么办法从父窗口调用它？我不确定如何在子窗口上运行JavaScript，因为它是Facebook的应用程序权限页面。 – stackOverlord 2012-02-07 02:45:24

不幸的是，如果您没有编辑访问不同域上的子页面的权限，您将无法确定子项的宽度/高度，因此无法将父窗口居中内容。但是，Facebook可能支持某些查询字符串变量，这些变量定义从外部域加载的页面的宽度和高度，在这种情况下，您可以使用popupName.scrollTo（）来滚动弹出窗口，给定您定义的宽度/高度。 – Aaron 2012-02-07 02:58:04

嗯我试过w = window.open（...）; w.scrollTo（300,10），但它似乎没有任何作用。 – stackOverlord 2012-02-07 03:23:20

使用此功能来居中弹出。

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容器 DIV然后用

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

来源

2012-02-07 03:35:19

使弹出窗口为中心

回答

相关问题