I have a jQuery Modal dialog with an iframe in it, the iframe includes a form. When a user submits the form, I would like to close down the modal dialog.
How can I do that?
jquery modal script on index.php:
<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>
link on index.php to call showRegDialog modal:
<a href="javascript:showRegDialog('/register.php');">Register now</a>
This is the content of the register.php
<html>
<body>
<form action="" method="POST">
<input type="text">
<input type="submit">
</form>
</body>
</html>
I have a jQuery Modal dialog with an iframe in it, the iframe includes a form. When a user submits the form, I would like to close down the modal dialog.
How can I do that?
jquery modal script on index.php:
<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>
link on index.php to call showRegDialog modal:
<a href="javascript:showRegDialog('/register.php');">Register now</a>
This is the content of the register.php
<html>
<body>
<form action="" method="POST">
<input type="text">
<input type="submit">
</form>
</body>
</html>
2 Answers
Reset to default 4Call javascript function in parent window like this:
parent.yourJsFunction();
put it in "onsubmit" in your form.
You might be looking for close
Give your form an id.
$("#formID").submit(function(){
parent.closeModal();
});
// function for closing modal window (in parent page)
function closeModal() {
$("#externalSite").dialog("close");
}