从表单输入类型=“提交"打开 Fancybox(或等效) [英] Open Fancybox (or equiv) from Form input type="submit"

问题描述

有没有办法得到一个花哨的盒子(http://fancy.klade.lv/)或任何提交表单的其他灯箱(带有图像按钮)?

is there a way to get a fancybox (http://fancy.klade.lv/) or any other lightbox from submitting a FORM (with an image button)?

HTML 看起来像这样:

HTML looks like this:

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

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

Anyone spotting my mistake or having a workaround or an alternative script? Thanks in advance

推荐答案

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

I believe all the other answers miss the point of the question (unless I am the one misunderstanding). What I think the author wanted was to have it such that when a form is submitted, its results are displayed in a fancybox. I didn't find that any of the other answers provided that functionality.

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

To achieve this, I used the jQuery Form Plugin (http://malsup.com/jquery/form/) to easily convert the form to an ajax call. Then I used the success callback to load the response into a fancybox using a manual call to $.fancybox().

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

所以不要将fancybox附加到一些人工的<a>标签，您将 ajaxForm 附加到表单本身.

So instead of attaching fancybox to some artificial <a> tag, you attach ajaxForm to the form itself.

这篇关于从表单输入类型=“提交"打开 Fancybox(或等效)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！