Question

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

使用着名的fancyBox插件。它在头部被称为：

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

通常通过添加class-name来附加脚本：

<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日）

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

我的理由：似乎Google方向不允许在<iframe>中显示。考虑到这一点，为fancyBox配置变通方法太复杂了。我放弃了fancyBox并使用普通的旧Javascript：

as shown here

Answer 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'
              });
}

Answer 2

使用jquery提交按钮可以：

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

在花式框'确定'按钮后，单击提交表单..

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

jquery弹出效果'onclick'提交按钮（WITHDRAWN）

2 个答案: