可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I've been using Simple Modal and i feel it doesn't live up to what i need at the moment.
Is there a Modal Box that supports loading external files and allows those external files to close the modal box and redirect the parent page to some url.
An example of what i want to do. You have a list of users, you could click "Add user" and a Modal Box with the form pops up, you fill that in and submit it. That would close the box and reload the user list page so you would see the user in the list.
Then you could click "Edit user" and a Modal Box with the user info filled in the form fields would pop up and you could edit, submit and it would close and refresh.
I know this can be done if i have the user info form as a hidden div for each user but this will not scale well and it is a lot of overhead data.
I found some code about this on Google Code but just can't get it to work (possibly different simple modal version
I am willing to change to another modal box tool also.
UPDATE:
Do either Thickbox or Fancybox support being closed from a child IFrame element?
回答1:
Fancybox is also another option. Works similarly to Thickbox
EDIT:
It appears after some playing around that the plugin does not natively support closing the Fancybox through an child iframe element. I think that this is certainly achievable with a little effort (I started hacking together something here, although I stress that this was simply a POC and does not work as the button within the iframe removes the fancybox div wrapper from the DOM and therefore does not display when you click the google image again).I am wondering however, if an iframe is the right lines to go down.
For adding a user, my thought would be that you could present the user with a modal form like the one on the Monster site you get when you click 'Sign In.' Once you click add user, make an AJAX call to your datasource to insert a new user and then on returning success, you could either initiate a page refresh or use AJAX to update the list.
For editing a user, once a user is selected, you could make an AJAX call with a user id to populate a modal form with the user details retrieved from your data source when the AJAX call returns success. Once you have finished editing the user, make an AJAX call to update your datasource and then again, initiate a page refresh or use AJAX to update the list.
Instead of the page refresh or final AJAX call in each scenario, you could simply use JavaScript/jQuery to update the list/ list details, depending on whether a user has been added or edited, respectively.
回答2:
Sounds like you already found the answer but for the benefit of others you can close an iFrame implementation of FancyBox by using the following JavaScript in the iFrame:
parent.$.fn.fancybox.close();
回答3:
Below is a basic dialog interaction loading content into an iFrame and then closing the dialog from the iFrame.
Note that to illustrate this I have two code snippets. The first is labeled file1.html. The second you should name "myPage.html" if you want it to work and place it in the same directory as the first file.
Note that the call to close the dialog could be used in other ways depending on your desired functionality. For example another example could be on successful form submission.
Create the files locally on your system and open file1.html and try it out.
file1.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
<script type="text/javascript">
$(document).ready(function() {
$("#modalDiv").dialog({
modal: true,
autoOpen: false,
height: '180',
width: '320',
draggable: true,
resizeable: true,
title: 'IFrame Modal Dialog'
});
$('#goToMyPage').click(
function() {
url = 'myPage.html';
$("#modalDiv").dialog("open");
$("#modalIFrame").attr('src',url);
return false;
});
});
</script>
</head>
<body>
<a id="goToMyPage" href="#">Go to My Page</a>
<div id="modalDiv"><iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe></div>
</body>
</html>
myPage.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#clickToClose').click(
function() {
window.parent.$("#modalDiv").dialog('close');
return false;
});
// uncomment and use the below line close when document is ready (no click action by user needed)
// the same call could be put elsewhere depending on desired functionality (after successful form submit, etc.)
// window.parent.$("#modalDiv").dialog('close');
});
</script>
</head>
<body>
<a id="clickToClose" href="#">Click to close.</a>
</body>
</html>
回答4:
parent.$.modal.close(); works for simple modal plugin.
回答5:
I have found the solution for me, it's using nyroModal. It supports iframes and closing of the modal through its iframe child with this code.
parent.$.nyroModalRemove();
I am going to accept Russ Cam's answer to give him more rep since his reply made me think a lot about how this is going to work and eventually made me find the answer.
回答6:
this is the script of dialog when i traced with firebug
<iframe>
scrolling="auto"
height="100%"
frameborder="0"
width="100%"
title="Dialog Title"
marginheight="0"
marginwidth="0"
id="modalIFrame"
src="test.php"
</iframe>
i need to change height to 95%, because the dialog scroll always visible in the screen T.T
回答7:
Have you tried ThickBox ?
回答8:
My FrameDialog will allow for this, it basically extends on the Dialog... if you're using the same domain, you should be able to call $.FrameDialog.close() though, if you're redirecting, you can simply redirect the parent. window.parent.location will do.
http://plugins.jquery.com/project/jquery-framedialog
回答9:
HI,
Anyone who is having trouble closing a Fancy Box iFrame using a manual install of Fancy Box in Wordpress 3.0:
Use this link in your iframe:
<a href="#" onClick="parent.jQuery.fancybox.close();" title="Close window">close fancybox</a>
It works :)
回答10:
This works for me...
<input name="Envoyer" value="Annuler" type="button" onclick="javascript:window.parent.$.fancybox.close();" />
回答11:
Try colorbox it's also a good one.
