在面板中加载iframe时显示微调器

Question

我正在使用jQuery facebox打开一个新窗口,用于在我的rails应用程序中使用Devise/Omniauth验证Facebook用户.

起初我想简单地在div中加载它:

$('#facebook-auth').live 'click', ->       
  $.facebox '<div id="foo"></div>'
  $('#foo').load $(this).attr 'href'
  false

但问题是这不起作用,因为有多个重定向.第一个链接打开/auth/facebook,重定向到graph.facebook.com,重定向回我的回调网址,最终重定向到确认页面.我需要向用户显示确认页面.我现在正在使用的方法是打开一个这样的外部窗口:

$('#facebook-auth').live 'click', ->
  width = 600
  height = 400
  left = (screen.width / 2) - (width / 2)
  top = (screen.height / 2) - (height / 2)
  window.open $(this).attr('href'), 'authPopup', "menubar=no,toolbar=no,status=no,width=#{width},height=#{height},toolbar=no,left=#{left},top=#{top}"
  false 

有没有办法让我打开一个新窗口并在facebox中加载其内容？还是有更好的方法？

编辑

感谢Jared的建议,我可以使用iFrame mod从这里开始.看到这个jsFiddle.但是我想在iframe内容加载时显示加载微调器.这可能吗？根据文档,正常的方法是这样的:

$(".badge").live "click", ->
  $.facebox ->
    $.get "page.html", (data) ->
      $.facebox data
  false

但我不知道如何用iframe mod做到这一点.

Answer 1

尝试这个css技巧..这是你想要做的吗？

http://jsfiddle.net/7CBjn/3/

iframe {
    background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");   
    background-repeat: no-repeat;
    background-position: 50% 50%;
}