Menu
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?
814
With the Bootstrap integration, you can put the content of the IFrame inside a modal to make it even more interactive and entertaining. IFrames in Bootstrap are fully responsive components, adjusting according to the screen size so there's no need to worry about the quality of your content.
Find there an insert “Add new PopUp” and choose Iframe template. Type the name of future Popup and click the button “Save”. Go to Design tab -> Appearance -> find “IFrame URL” field. Copy and paste here URL of site, that you need to display in PopUp as iFrame.
Use the window open() method to popup a window tab as a modal with a URL. Note: JavaScript already has the ShowModalDialog function but it does not work in all browsers.
Step 1 : Start a new ASP.NET MVC Web application. Add a new controller called Home and in the Home controller, the Index method is available to you but there is not a view with it so add a view by right-clicking in Index action. Step 2 : In index. aspx add one HTML button to open our modal popup window like below.
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();
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
