16

有没有办法从提交表单（带有图像按钮）中获得一个花式框（ 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();

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

4

9 回答 9

45

我相信所有其他答案都没有抓住问题的重点（除非我是一个误解）。我认为作者想要的是，当提交表单时，它的结果会显示在一个精美的框中。我没有发现任何其他答案都提供了该功能。

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

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

因此，不是将fancybox 附加到一些人工<a> 标记，而是将ajaxForm 附加到表单本身。

于 2010-03-10T22:53:44.813 回答
9

一个更好的主意是使用即时 html，即。

$("#buttontoclick").click(function() {
    $('<a href="path/to/whatever">Friendly description</a>').fancybox({
        overlayShow: true
    }).click();
});
于 2009-08-17T23:07:03.937 回答
8

试试这个

$(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 的单击。

希望这可以帮助

于 2009-08-04T12:18:23.337 回答
6

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>
于 2010-05-11T22:31:33.840 回答
1

基于从

  • 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
    }); 

});
于 2012-06-17T14:13:19.483 回答
0

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

于 2009-08-27T04:40:39.667 回答
0

我一直在努力解决这个问题，并找到了一种在花哨的 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链接->onComplete

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

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

于 2012-03-23T16:17:45.040 回答
0

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

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

--

$(document).ready(function(){
        $('#yourform').submit(function() {
            var url = $(this).attr("action") + "?" + $(this).serialize();
            $.fancybox({
                href: url,
                'type': 'iframe'
            });
            return false;
        });
});
于 2012-06-17T15:51:44.203 回答
-2

我只需要这样做。这就是我的做法。

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

这样您就可以一次性提交表单并调用fancybox。它确实提交了表单 ajax 样式。“提交”按钮需要在 <a> 标记中。

希望有帮助。

于 2010-02-10T22:37:18.790 回答