标签: facebox

我正在使用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做到这一点.

哪一个最适合用于:

1. 图片
2. 常规div内容
3. ajax加载的内容
4. 表单发布到服务器

我正在寻求执行一个基本的表单帖子,但是以下内容在Chrome和Safari中提交给服务器两次(但在Firefox中表现如预期):

<form id="create-deck-form" action="/decks/create" method="post">
  <fieldset>
    <legend>Create new deck</legend>
    <label for="deck-name-field">Name</label>
    <input id="deck-name-field" name="deck-name-field" type="text" value="" maxlength="140" />

    <label for="tag-field">Tags</label>
    <input id="tag-field" name="tag-field" type="text" value="" maxlength="140" />

    <input class="add-button" type="submit" value="Create" />
  </fieldset>
</form>

我想onsubmit在提交之前使用该属性对字段执行验证,但无论返回值是什么true,表单都会提交两次.

我试图将jQuery处理程序绑定到表单,但是在这里也没有阻止默认行为,表单被提交两次,例如:

<script type="text/javascript">
 $(document).ready(function() {
     $("#create-deck-form").submit(function(event){
          if($("#deck-name-field").val() == "") {
            event.preventDefault();
            alert("deck name required");
          }
        });
 });
</script>

虽然我认为这对于一双新鲜的眼睛有一些令人眼花缭乱的明显错误,但我深感困惑的是,为什么提交(无论有无验证)都会在Chrome和Safari中向服务器发送重复的帖子.任何见解都会让我感激不尽.

我正在使用facebox(https://github.com/defunkt/facebox)在模态窗口中调用网页.

有没有推荐的替代方案呢？

我更喜欢jQuery相关的解决方案.

此致,Nuri Akman

我有我的jQuery facebox插件,为我制作灯箱.我点击了一个链接,然后出现了一个好友请求表单.

单击"发送请求"时,表单会生成ajaxcall,但是2个字段不会发送您在其中写入的内容,它只是发送空值.

但如果它不在facebox灯箱内,那么它可以工作并在ajax调用中发送值.

所以facebox.js中的某些东西阻止了字段并向它们发送空值.

我怎么解决这个问题？

这是facebox.js:

    (function($) {
  $.facebox = function(data, klass) {
    $.facebox.loading()

    if (data.ajax) fillFaceboxFromAjax(data.ajax)
    else if (data.image) fillFaceboxFromImage(data.image)
    else if (data.div) fillFaceboxFromHref(data.div)
    else if ($.isFunction(data)) data.call($)
    else $.facebox.reveal(data, klass)
  }

  /*
   * Public, $.facebox methods
   */

  $.extend($.facebox, {
    settings: {
      opacity      : 0,
      overlay      : true,
      loadingImage : 'images/loading.gif',
      closeImage   : 'images/closelabel.png',
      imageTypes   : [ 'png', 'jpg', 'jpeg', 'gif' ],
      faceboxHtml  : '\
    <div id="facebox" style="display:none;"> \
      <div class="popup"> \
        <table> \
          <tbody> \
            <tr> \ …

继承人我的链接:

http://tinyurl.com/6j727e

如果单击test.php中的链接,它将在模式框中打开,该框使用jquery'facebox'脚本.

我正在尝试对此框中的点击事件采取行动,如果你查看test.php的来源,你会看到我试图在模态框中找到链接.

    $('#facebox .hero-link').click(alert('click!'));

但是,它不会检测到点击,奇怪的是,当页面加载时,click事件会运行.

然而,关闭按钮的内置点击事件会关闭盒子,我怀疑我的本土点击事件是以某种方式被阻止的,但我无法弄明白.

有人可以帮忙吗？通常情况下,它是项目的最后一部分,它始终如一地保持着我;)

在我的Ruby on Rails应用程序中,我使用Facebox插件进行Ajax弹出窗口.我有2页叫做add_retail_stores/new.html.erb和add_retail_stores/new.js.该new.js页面继承了new.html.erb页面中的所有元素,因此它看起来完全相同.我在HTML页面上有一个Google地图脚本,可以正常工作.但是new.js在我的不同页面上弹出的页面叫做add_store_prices.html.erbpage(<%= link_to add_retail_store_path, :remote => true %>)

我收到错误:

警告:忽略了从异步加载的外部脚本调用document.write().源文件:http:// localhost:3000/add_store_prices 行:0

我相信因为它试图通过2个函数/脚本.第一个是Facebox,然后是Google脚本.有谁知道如何处理这个错误？

编辑:

我相信Facebox插件正在使用,document.write但我不确定在哪里,也许在我的页面上的这两行之一？

new.js:

$.facebox('<%= escape_javascript(render :template => 'business_retail_stores/new.html') %>')
$('#facebox form').data('remote','true');

使用Facebox的文档,我试图以编程方式弹出Facebox,Facebox内容是文档中div的内容.

问题是它没有打开那个内容 - 它打开了空白.怎么了？带有示例的完整代码包含在这个jsFiddle中:http://jsfiddle.net/N4B4v/1/

<div id="#TEST10" style="display: none;">
    HEYYYY!
    <br />
    <br />
    heyyyyy!
</div>

<div style="margin-bottom: 10px;">
    <a href="#" onclick="jQuery.facebox({ div: '#TEST10' }); return false;"><input type="checkbox" name="AgreeToRequirements" /></a>Open Facebox By Checking The Box
</div>

我正在尝试将jquery facebox插件用于直播事件(官方实现,而不是插件).

我的主页面通过ajax加载到页面中.该远程页面还具有指向其他远程页面的链接,我想在弹出对话框中显示该页面.我一直在使用facebox插件.

以下代码不起作用,只是将远程页面加载到视口中的新页面,而不是弹出窗口.

<script type="text/javascript">
            jQuery(document).ready(function($) {

                $('a[rel*=facebox]').live("click", function() {
                    $('a[rel*=facebox]').facebox()
                });
            });
          </script> 

这是使用直播活动的正确方法吗？

我的开发机器遗憾地只包含IE6 [:(],因此我无法使用firebug来调试代码.

我在我的一个页面中使用了facebox弹出窗口.我在弹出对话框中有一个按钮.当我单击该按钮时,facebox弹出窗口应该关闭(当我们按下弹出窗口时它关闭的方式相同).怎么做？

此外,当按下该按钮时,我正在做一些Ajax的事情,所以我无法覆盖onClick事件.

我正在使用Facebox作为我的弹出窗口.
但是,在加载大图片时,它会显示Facebox但没有旋转圆圈.

该"Facebox加载"的线程有这样的解决方案:

$("#test2").click(function(){ 
       $.facebox(function() { 
            $.facebox.loading(); 
            $.get('whatever.php', function(data) { 
                    $.facebox.close_loading(); 
                            $.facebox(data); 
                            }) 
            }) 
       }) 

但是,我无法正确实现图像.

我认为没有,但这不会加载到facebox内:

 $("#email").submit(function(event) {
    event.preventDefault();
    if ($("#tinput").val() == "") {
        $('#error').append('You need to select a template.<br />');
    } else if ($("#tsubject").val() == ""){
        $('#error').append('Subject cannot be blank.<br />');
    } else if ($("#tmessage").val() == "") {
        $('#error').append('Message cannot be blank.<br />');
    } else {
        $('#ecanvas').html('<center><img src="/templates/v2/images/loading.gif" /></center>');
        var formdata = $(this).serialize();
        $.post("/wizard/email-add", formdata, function (data) {
            $('#ecanvas').html(data);
        });
    return false;
})

这没有任何问题:

$("#email").submit(function(event) {
    event.preventDefault();
        $('#ecanvas').html('<center><img src="/templates/v2/images/loading.gif" /></center>');
        var formdata = $(this).serialize();
        $.post("/wizard/email-add", formdata, function (data) {
            $('#ecanvas').html(data);
        });
    return false;
}) …

我在我的facebox模式上使用我的自定义关闭按钮来关闭它...它工作正常(即)它关闭但它在我点击关闭按钮后附加到页面的底部...

<a onclick="$.facebox.close();" href="javascript:void(0);" class="close"> 
  <img alt="Close the popup" src="images/close.png" title="close" 
     class="close_image" /> 
</a>

这是我得到的,

alt text http://img825.imageshack.us/img825/3739/foo.jpg

这是我想要做的,

$(document).bind('close.facebox', function() {
        $(document).unbind('keydown.facebox')
        $('#aspnetForm').append($('#facebox .content').html());
        /// extra line to make sure there's no flashing effect as the facebox closes: the content is still in there too!
        $('#facebox .content').children().css({ 'display': 'block' });
        $('#facebox').fadeOut(function() {
            $('#facebox .content').removeClass().addClass('content')
            hideOverlay()
            $('#facebox .loading').remove()
        })

    })

我的页面有这个,

   $(document).ready(function($) {
        $.facebox.settings.opacity = 0.2;
        $('a[rel*=facebox]').facebox();
     });

  <div id="forgetPassword" style="display:none"> 
    //content
   </div>