4

由于我是初学者，所以我有一个初学者的问题。

使用著名的fancyBox插件。它在头部被调用，如下所示：

$(document).ready(function() {
    $(".fancybox").fancybox();
});

通常通过添加类名来附加脚本：

<a class="fancybox fancybox.iframe">...</a>

我现在遇到的困难是因为我想在用户提交表单后运行 fancyBox 弹出窗口：

<form action="http://maps.google.com/maps" method="get">
    ...(google API stuff etc, etc)...
    <input type="submit" value="...">

我对这一点的研究使我得出结论，我可能必须使用onsubmit或onclick在

<input type="submit">

然而，我的实验证明是徒劳的。

任何帮助将不胜感激。

=========================================

更新：（2013 年 1 月 7 日）

我正在撤回我的问题，因为我显然已经徘徊在目前略高于我头顶的主题上。我选择不删除这个问题，以防将来有人在这里找到一些有用的东西。谢谢大家的帮助。

我的理由：谷歌方向似乎不允许显示在<iframe>. 考虑到这一点，配置解决方法fancyBox将过于复杂。我放弃了 fancyBox 并使用了普通的旧 Javascript：

如此处所示

4

2 回答 2

1

使用 $.ajax 发布表单可为您提供最大的控制权。然后，您可以从客户端控制成功和错误条件。

为此，您需要捕获提交事件： 

$('#form').submit(function() {
 ajaxUpdate();
 return false;   
});

然后创建一个函数： 

function ajaxUpdate(){
 var formSerial = $('#form').serialize();
 $.ajax({
        url: '<url to post to>',
        dataType: "text",
        type: "POST",
        data: formSerial,
        success: function(text) {
          $(".fancybox").fancybox();
        },
        error: function(text) {
          alert('error in posting');
        }
});
}

然后，您可以在成功和错误块中做您喜欢的事情。

要加载一个窗口，您可以将以下内容添加到您的函数中：

if(confirm("Do you want to open the directions?")){
      $.fancybox({
                'titleShow': false,
                'width': 370,
                'height': 300,
                'href': <URL>,
                'type': 'iframe'
              });
}
于 2013-01-02T05:40:07.170 回答
0

使用 jquery 提交按钮是可能的：

$('#target').submit(function() {
$(".fancybox").fancybox();
  return false;
});

在花哨的框“确定”按钮后单击提交表单..

希望这个想法会有所帮助。

于 2013-01-02T05:26:57.783 回答