从Form input type ="submit"打开Fancybox(或equiv)

Question

有没有办法让fancybox(http://fancy.klade.lv/)或任何其他灯箱提交FORM(带图像按钮)？

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

有人发现我的错误或有解决方法或替代脚本？提前致谢

Answer 1

我相信所有其他答案都错过了问题的重点(除非我是一个误解).我认为作者想要的是这样,当提交表单时,其结果将显示在fancybox中.我没有发现任何其他答案提供了该功能.

为此,我使用jQuery Form Plugin(http://malsup.com/jquery/form/)轻松地将表单转换为ajax调用.然后我使用成功回调将响应加载到fancybox中,使用手动调用$ .fancybox().

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

因此,不要将fancybox附加到某个人工<a>标记,而是将ajaxForm附加到表单本身.

Answer 2

更好的想法是使用即时html,即.

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

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点击.

希望这可以帮助

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>