从表单输入类型“submit”打开Fancybox（或等效）

Question

有没有办法让fancybox (http://fancy.klade.lv/) 或其他 lightbox 在提交表单（带有图像按钮）时有效？HTML看起来像这样：

<form action="/ACTION/FastFindObj" method="post">
  <input name="fastfind" class="fastfind" value="3463" type="text">
  <input name="weiter" type="submit">
</form>

这些都不行：

    $("form").fancybox();
    $("input").fancybox();
    $("input[name='weiter']").fancybox();

有没有人发现我的错误，或者有没有解决方法或替代脚本？提前感谢。

- nickmorss

Answer 1

我认为其他所有答案都错了（除非是我误解了问题）。我认为作者想要的是当表单提交时，其结果会在fancybox中显示。我发现其他答案都没有提供这个功能。

为了实现这一点，我使用了jQuery表单插件（http://malsup.com/jquery/form/）来轻松地将表单转换为ajax调用。然后，我使用成功回调来使用手动调用$.fancybox()将响应加载到fancybox中。

$(document).ready(function() {
    $("#myForm").ajaxForm({
        success: function(responseText){
            $.fancybox({
                'content' : responseText
            });
        }
    }); 
});

因此，与其将fancybox附加到某个人工的<a>标签上，你应该将ajaxForm附加到表单本身。

- Garland Pope

---

太好了！我希望这能帮助下一个尝试做同样事情的人。虽然很希望FancyBox能包含这个功能，但在此期间这个解决方案也会很好用。 - Garland Pope

好的，它确实帮助了下一个女孩。谢谢你，这正是我在寻找的！ - Kerri

这正是我正在寻找的，谢谢！他们应该在他们的主页上发布这个用法示例。 - ᴍᴇʜᴏᴠ

它确实打开了一个fancybox，但里面没有内容，我正在尝试在提交时加载hoghcharts。 - Justin Dominic

这对我帮助很大，但我的第一个fancybox附带了一些配置，而您不是这种方式进行附加... 但问题很容易解决！ var localFbOptions = {}; jQuery.extend( localFbOptions, fancyboxOptions, {content': data} ); jQuery.fancybox(localFbOptions); - haltabush

Answer 2

更好的做法是使用即时html，也就是说。

$("#buttontoclick").click(function() {
    $('<a href="path/to/whatever">Friendly description</a>').fancybox({
        overlayShow: true
    }).click();
});

- Vertigo

Answer 3

尝试这个

$(document).ready(function() {
  $("#link").fancybox();
  $("#btn").click(function(){
    $("#link").trigger('click');
  });
});

<input type="button" id="btn" value="Button" />
<div style="display:none;"> 
 <a href="#test" id="link">Click</a>
</div>

<div id="test" style="display:none;">fancy box content</div>

在点击按钮时，您会触发隐藏的href的单击操作。

希望这可以帮到您。

- Yashvit

Answer 4

Fancybox能够直接处理ajax请求，无需额外的jQuery脚本。

$("#login_form").bind("submit", function() {

    $.ajax({
        type        : "POST",
        cache       : false,
        url         : "/login.php",
        data        : $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });

    return false;
});

<form action="/login.php" method="POST" id="login_form">
<input type="input" size="20" name="username" />
<input type="submit" value="Login" />
</form>

- Ian Bryce

---

是的，Ian，那基本上就是我提出的解决方案。我只是使用了表单插件，使代码更短，更易读。 - Garland Pope

我更喜欢这个，因为它不需要插件，而该插件已经有一段时间没有得到维护。 - Joost Baaij

Answer 5

基于以下方案：

• Garland Pope的原始解决方案[不包含.ajaxForm]
• Paolo Bergantino提供的AJAX调用解决方案[作为.ajaxForm的替代品]
• 由本人提供的Fancybox加载动画处理程序[以便用户知道内容正在加载]

--

$(document).ready(function() {
    $("#myForm").submit(function() {
        $.fancybox.showLoading(); // start fancybox loading animation
        $.ajax({
            data: $(this).serialize(), // get the form data
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            success: function(response) { // on success..
                $.fancybox({ 'content' : response }); // target response to fancybox
            },
            complete: function() { // on complete...
                $.fancybox.hideLoading(); //stop fancybox loading animation
            }
        });
        return false; // stop default submit event propagation
    }); 

});

- Dexter Huinda

Answer 6

我刚刚在这个问题上苦苦挣扎，找到了一种在fancybox的iframe中显示结果的方法。我还不擅长使用ajax，所以需要使用jquery来解决php的问题。无论如何，这是我的第一个答案！：

你需要在jquery.fancybox js文件中进行一些微调，我使用的是jquery.fancybox.1.3.4.pack.js。用任何编辑器打开它，然后搜索：name="fancybox-frame ：就是这样，应该只能找到一个实例，并且看起来像：

 name="fancybox-frame'+(new Date).getTime()+'"

现在你想要重命名整个：

fancybox-frame'+(new Date).getTime()+'` 

你可以将它命名为任何你想要的名称，我只是称其为："fbframe"并保存文件。现在按照以下jQuery设置和表单添加即可正常工作：

//activate jquery on page load and set onComplete the most important part of this working

$(document).ready(function(){

        $("#a").fancybox({
                'width'             : '75%',
                'height'            : '100%',
                'autoScale'         : false,
                'type'              : 'iframe',
                'onComplete':function (){$('#formid').submit();},
            }); 
         });

//function called onclick of form button.      
function activatefancybox(Who){
    $("#setID").val(Who); // i set the value of a hidden input on the form
    $("#a").trigger('click');//trigger the hidden fancybox link

    }

// hidden link 
 <a id="a" href='#'></a> 

 // form to submit to iframe to display results. 
 // it is important to set the target of the form to the name of 
 // the iframe you renamed in the fancybox js file.
 <form name='iduser' id='iduser' action='page.php' target='fbframe' method='post'>
 <input />
 <input />
 <input id='setID' type='hidden' name='userid' value='' />
 <input type="button" onClick='testfb(123)' />
 </form>

流程如下：

点击提交 -> 调用函数 -> 函数点击FB链接 -> 完成

完成后，当FB加载完毕后，将表单提交到iframe！完成。

请注意，我已从我的当前项目中摘取了这部分，并仅编辑了某些必需的部分，我仍然是一名业余编码人员，如果可以的话，建议使用ajax。而且我只使用FB1！现在有FB2可用。

- slappy-x

Answer 7

这个解决方案可能适合您的目的：

• 无需ajax调用
• 使用fancybox的iframe类型选项
• 通过jquery的serialize方法在fancybox的href选项中传递url [+数据]
• 加载动画是自动的

--

$(document).ready(function(){
        $('#yourform').submit(function() {
            var url = $(this).attr("action") + "?" + $(this).serialize();
            $.fancybox({
                href: url,
                'type': 'iframe'
            });
            return false;
        });
});

- Dexter Huinda

Answer 8

您可以使用Ajax提交表单数据，将数据存储在会话中，然后触发链接点击。

- Eric Koh

---

不需要将其存储在会话中，您可以使用jQuery的.serializeArray()序列化表单并将其与ajax请求一起发送。 - Joost Baaij

Answer 9

我刚刚不得不做这件事。这是我处理它的方式。

$('#elementid').fancybox({
   onStart : function() {
      $.post($(this).attr('href'), $('#formid').serialize());
   }
});

这样你就可以一次性提交表单并调用fancybox。它会以ajax方式提交表单。"提交"按钮需要在<a>标签中。

希望能有所帮助。

- Joe Mills