jQuery 使用 BUTTON 标签在表单提交时关闭 Fancybox iframe - 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5491346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Close Fancybox iframe on form submit using BUTTON tag - not working
提问by pepe
According to the Fancybox API, I am using the following code in an iframe:
根据 Fancybox API，我在 iframe 中使用以下代码：
<form>
... // form fields here
<button onclick="parent.$.fancybox.close();">
<span>Save</span>
</button>
</form>
The form actually closes when 'Save' is clicked -- but the form content is not submitted. It's like the closeevent is triggered before the form actually submits its content.
单击“保存”时，表单实际上会关闭——但未提交表单内容。这就像在close表单实际提交其内容之前触发事件。
Without the onclick, content is submitted, but the subsequent page opens inside the iframe -- not what I want.
没有onclick, 内容被提交，但后续页面在 iframe 内打开——不是我想要的。
Is there a way around this?
有没有解决的办法？
Thanks for helping.
谢谢你的帮助。
采纳答案by pepe
I ended up solving this by creating buttons using multiple span(for style purposes) and a few lines of jQuery
我最终通过使用多个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>
回答by Amr Elgarhy
You can use event.preventDefault()method like this:
您可以像这样使用event.preventDefault()方法：
<form>
... // form fields here
<button onclick="event.preventDefault(); parent.$.fancybox.close();">
<span>Save</span>
</button>
</form>
Then submit the page using jquery
So it will be better to make it in a function like this:
所以最好把它放在这样的函数中：
function closeME()
{
event.preventDefault();
parent.$.fancybox.close();
$('#myForm').submit();
}
... // form fields here
<button onclick="closeME();">
<span>Save</span>
</button>
</form>
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>
回答by cerverg
This one works perfect me:
这个很适合我：
$('body',top.document).removeClass('fancybox-lock');
$('.fancybox-overlay',top.document).css('display','none');
All other things didn't work.
所有其他事情都没有奏效。
回答by tbradley22
for other readers still having trouble getting fancybox to close from an iframe, it may be an issue with iframe being from a different origin as the parent window. that was the issue i was running into. Rob W provided an excellent solution using postMessage here Uncaught TypeError: Cannot read property 'fancybox' of undefined - Google Chrome only error?
对于其他读者仍然无法从 iframe 关闭fancybox，这可能是 iframe 与父窗口来自不同来源的问题。这就是我遇到的问题。Rob W 在此处使用 postMessage 提供了一个出色的解决方案Uncaught TypeError: Cannot read property 'fancybox' of undefined - Google Chrome only error?
