logo标签列表

jQuery iframe模态框在表单提交后关闭

javascriptjqueryhtmlforms
3

我有一个带有iframe的jQuery模态对话框，其中包含一个表单。当用户提交表单时，我想关闭模态对话框。

我该如何做到这一点？

index.php上的jQuery模态脚本：

<script type="text/javascript">
function showRegDialog(url) {
    $(function() {
            var $this = $(this);
            var horizontalPadding = 30;
            var verticalPadding = 30;
            $('<iframe id="externalSite" scrolling="no" frameborder="0" class="externalSite" src="' + url + '" />').dialog({
                title: ($this.attr('title')) ? $this.attr('title') : 'Choose your location',
                autoOpen: true,
                width: 700,
                height: 700,
                modal: true,
                resizable: true,
                autoResize: true,
                overlay: {
                    opacity: 0.5,
                    background: "black"
                }

            }).width(700 - horizontalPadding).height(700 - verticalPadding);            

    });
}
</script>

在index.php上添加链接以调用showRegDialog模态框：

<a href="javascript:showRegDialog('/register.php');">Register now</a>

这是register.php的内容。
<html>
<body>
<form action="" method="POST">
<input type="text">
<input type="submit">
</form>
</body>
</html>
2个回答
4
像这样在父窗口中调用JavaScript函数：

parent.yourJsFunction();

将其放入表单的“onsubmit”中。
刚刚注意到一个问题，如果我尝试第二次打开对话框并提交表单，它不会关闭。由于某种原因，只有第一次有效... - Or Weinberger
你能帮我解答一下我的问题吗？ - Or Weinberger
你能发一下你网页的链接吗？ - egze
可能需要在关闭对话框后调用销毁函数，因为如果第二次打开它，可能会出现具有相同ID的两个元素。只是一个猜测。 - egze
我遇到了一个Uncaught TypeError: parent.closeModal不是一个函数的错误，两个函数都在iframe和主窗口的正确位置。 - user6818018
1

你可能正在寻找关闭。

给你的表单一个ID。

$("#formID").submit(function(){
    parent.closeModal();
});

// function for closing modal window (in parent page)
function closeModal() {
    $("#externalSite").dialog("close");
}
但是我需要在表单提交后才启动该命令，而且表单位于iframe内部，那么我该如何实现您的解决方案？谢谢。 - Or Weinberger
由于某种原因无法正常工作。请查看此链接：http://pastebin.com/npaBAt6a 当我提交表单时，它没有关闭对话框，而是只提交了表单。 - Or Weinberger
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接