Question

有没有办法获得一个fancybox（http://fancy.klade.lv/）或任何提交表格的其他灯箱（带图像按钮）？

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附加到某些人造的＆lt; a＆gt; tag，你将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>

Answer 5

基于

Garland Pope的原始解决方案[less .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
    }); 

});

Answer 6

您可以对表单数据进行ajax提交，将数据存储在会话中，然后触发链接点击。

Answer 7

我刚刚一直在努力解决这个问题，并且已经找到了一种方法来显示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>

过程是：

点击提交 - ＆gt;通话功能 - ＆gt;功能点击FB链接 - ＆gt; onComplete

onComplete在FB加载后将表单提交到iframe！完成。

请注意我已经从我当前的项目中删除了这个并且刚刚编辑了某些必需的部分，我仍然是一个业余编码器并且如果可以的话会推荐ajax。而且我也只使用FB1！ FB2现已推出。

Answer 8

此解决方案可能符合您的目的：

没有ajax致电
使用fancybox的 iframe类型选项
在fancybox的 href 选项中传递网址[+数据，通过jquery的序列化方法]
自动加载动画

-

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

Answer 9

我必须这样做。这是我如何去做的。

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

通过这种方式，您可以一次性提交表单并调用fancybox。它确实提交了ajax风格的表单。 “提交”按钮需要在＆lt; a＆gt;中。标签

希望有所帮助。

从Form input type =“submit”打开Fancybox（或equiv）

9 个答案: