使用 BUTTON 标签关闭表单提交上的 Fancybox iframe - 不起作用

Question

根据 Fancybox API，我在 iframe 中使用以下代码：

<form>

... // form fields here

<button onclick="parent.$.fancybox.close();">
<span>Save</span>
</button>

</form>

单击“保存”时，表单实际上关闭 - 但未提交表单内容。这就像在表单实际提交其内容之前触发 close 事件。

如果没有 onclick，内容会被提交，但后续页面会在 iframe 内打开 - 这不是我想要的。

有办法解决这个问题吗？

谢谢你的帮助。

Answer 1

您可以使用 event.preventDefault() 方法，如下所示：

<form>

... // form fields here

<button onclick="event.preventDefault(); parent.$.fancybox.close();">
<span>Save</span>
</button>

</form>

然后 使用 jquery 提交页面

因此最好将其放在这样的函数中：

function closeME()
{
   event.preventDefault(); 
   parent.$.fancybox.close();
   $('#myForm').submit();
}    
    ... // form fields here

    <button onclick="closeME();">
    <span>Save</span>
    </button>



    </form>

<form action="" method="post" id="myForm">
    ... // form fields here
    <button onclick="closeME();">
    <span>Save</span>
    </button>
</form>

    <script type="text/javascript">
        function closeME() {
            event.preventDefault();
            parent.$.fancybox.close();
            $('#myForm').submit();
        }
    </script>

Answer 2

我最终通过使用多个 span （出于样式目的）和几行 jQuery 创建按钮来解决这个问题

<span id="save_btn" class="fc-button fc-button-prev fc-state-default fc-corner-left fc-corner-right">
        <span class="fc-button-inner">
            <span class="fc-button-content save_button">Save</span>
            <span class="fc-button-effect">
                <span></span>
            </span>
        </span>
</span>

<script>
$('#save_btn').click(function() {
  $('#my_form').submit();
});
</script>

Answer 3

这对我来说很完美：

$('body',top.document).removeClass('fancybox-lock');
$('.fancybox-overlay',top.document).css('display','none');

所有其他的事情都不起作用。

Answer 4

对于其他仍然无法从 iframe 关闭 fancybox 的读者来说，这可能是 iframe 与父窗口来自不同来源的问题。这就是我遇到的问题。 Rob W 在这里使用 postMessage 提供了一个出色的解决方案 Uncaught TypeError:无法读取未定义的属性“fancybox” - 仅 Google Chrome 错误？