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>

然后submit the page using 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在Uncaught TypeError: Cannot read property 'fancybox' of undefined - Google Chrome only error?

使用postMessage提供了一个出色的解决方案

使用BUTTON标记关闭表单上的Fancybox iframe - 无法正常工作

4 个答案: