I have a modal window which is loading an external HTML page. I am trying to figure out how to close this modal window after the content has been loaded. Since this is an external page I will not be able to change this content so I'm guessing that I need to put an event listener on the parent page that can detect when the modal window content has been loaded?
Any help would be greatly appreciated.
Are you using .load() to load the external HTML page? If so, you can put a callback function in the load() function. Like this:
$('#someDiv').load(function(){
//Put code to close the modal
});
JS:
To call a method in the parent window from the modal:
window.opener.document.globalMethodInOpeningFile(param1, param2);
To close the modal window, call this once content is loaded (you can use .load(callbackFn) to check for load`):
window.close();
If you're opening this modal page with window.showModalDialog() then you can't. As its own name indicates, it opens a modal window. Execution of javascript in your main (opener) page will be suspended until the modal closes (because modal dialogs can return values, so the caller must wait for the dialog to close before continuing). As the page you're opening is an external page (I assume in another domain), the only way for it to close, is that the user closes it.
If this is not acceptable, then you need to use window.open or an HTML modal window like the ones jQuery UI offers.
I'm assuming you are using Joomla's core modal feature. Another assumption is the controlling logic is located inside the modal window. Which is why the answer isn't as straight forward as it could be because I'm unsure of the workflow which opens the external HTML page you wish to fire the event after. However, after the logic which opens the external HTML page has fired, you can use the following JavaScript embedded inside your modal window's rendered HTML to close the modal window:
window.parent.SqueezeBox.close();
Related
If you load an external Modal dialog with bootstrap in MVC, its easy to set the height, for example:
$(".modal-body").height(300);
However, if I then send another view to that same popup (if they click a link within the popup which hits your controller and you return a different view to the existing popup window), then you may have a different size of content in this new view. So how can you resize the external modal dialog now?
My thought was to put JS code in that new view, and have an onload event:
<script type="text/javascript">
$(document).ready(function () {
$(".modal-body").height(530);
alert("hit.");
});
</script>
Well this code hits (the alert debug message 'hit' does show up), but the dialog height doesn't change from 300 to 530. So, perhaps the JS doesn't have access to that part of the DOM?
How can I get this second view within the same Modal dialog to have the correct height for its content?
thanks
So there was a Iframe inside of the popup and that was why the popups content size was not changed. There exists an issue where the popup content change isnt noticed anyway, but that is solved with the code I already had, posted above, but the below solves when its in an iframe if on the same domain as well.
The solution was on the site that the SRC in the iframe pointed to (the content of the popup) since hosted on the same domain, was to do:
parent.$(".modal-body").height(530);
parent.$("#myIframeId").height(500);
I'm using a colorbox to create a popup window that displays some dynamic content (using Coldfusion).
I would like to refresh this data, based on some selections by the user within the window.
Within my colorbox window I'm trying this:
<a id="selectLink" class='ajax' href="index.cfm?event=abc&sort=123" onclick="$.colorbox.close();">
This unfortunately only closes the current colorbox window, then directs the browser to a regular window.
Any ideas?
I have one page(say jobs.html) with an iframe loads another page( say joblist.html).There is one another popup(which displays description of job when clicks one title) which is generated with javascript will be load into the page in iframe when it loads.
I have to load the popup(job description popup) outside the iframe.
Any solution to get the jobs.html page's document body using javascript?
or How can i get this popup outside the iframe?
Thanks,
You can use the parent function.
You can define the function of showing the popup on the parent page. not in iFrame and call that function from iFrame.
Lets suppose you have a function of showing job description in Parent page.
var showJobDesc = function(jobTitle,jobDesc,...){
....
}
now in iFrame call this function like;
parent.showJobDesc(jobTitlem, jobDesc, ...);
By doing this you have no issues for placement/alignment of the Dialog.
I have to load the popup(job description popup) outside the iframe
What do you mean when you say load the popup outside the iframe?
If you want to open the other page in a pop up, use window.open
If you want to open the new page replacing the parent's page, use the location of the window
window.parent.location.href = "newPage.html"
In general, you can refer to the parent window (the window containing the iframe), use window.parent (and therefore the parent window's document as window.parent.document, and any script in the parent window as window.parent.scriptName)
Put the show javascript into container page, and in the iframe just call parent.showpopup().
parent.showpopup() throws an access denied error. Kinda makes sense since including an iframe means the developer of the page can control the page it's contained in.
I've got a question about CSS based popup windows, like those generated by jQuery UI's dialog system, or Colorbox. If I use those (or something like them) to open a popup window to an HTML page and that page has Javascript in it, does the Javascript in the popup window run in its own context, or does it become part of the context of the Javascript in the parent window that opened it? I ask so that I can write the Javascript on both pages (parent and popup) so there is no namespace collision.
Thanks in advance!
Doug
That depends on the type of popup. (I'm assuming we are talking about in-page popups here and not window.open() ones that open a new browser window.)
If it contains an IFRAME in which you load a separate page, then that page will have its own styles. You will have to re-load any CSS and JavaScript files you need.
If it doesn't contain an IFRAME, but just a regular DIV or other element into which content is loaded through AJAX (or directly output in the "parent" HTML page) then the popup will run in the context of the parent page.
If you use real popups (new windows) it is definitly in its own context.
If you use modal windows purely in HTML it depends. It can be an iframe (own context) or injected elements (parent context).
With Colorbox, you can set the iframe property to true and it will load the content in an iframe. This gives the page its own scope. If you don't use an iframe, then the page will be loaded in the context of the current document.
$('a.someLink').colorbox({ href:"somePage.html", iframe: true });
I'm using the jQuery-UI dialog widget in a Grails-based application to load a remote page (in this case, a simple file upload form). The remote page is defined elsewhere in my project, and doesn't know it is being loaded in a dialog.
Is there any way to close the dialog via a link in the remote page? Would I have to somehow pass a reference to the dialog when I load the page, or is there a way to trigger the close event while remaining agnostic of the dialog itself?
Try this HTML:
CLOSE
and this JavaScript:
$("#btnDone").click(function (e) {
e.preventDefault();
var dialogDiv = $("#btnDone").parents(".ui-dialog-content");
if (dialogDiv.length > 0) {
dialogDiv.dialog('close');
}
});
in your remote page. It will look to see if it is inside a dialog and if so, it will close it. If not, it will do nothing.
If you give your dialog a known ID then you can look it up using jquery (e.g. $('#mydialog') and close it via script on the remote page. The only issue might be getting JS to be evaluated when the remote page is loaded into the dialog.