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);
Related
I have created a popup window and below is my script.
var action="generateCertificate";
var url=contextPath +"/MyPage/MyPage.do?actionToPerform="+action;
var myWindow=window.open(url,"","width=500,height=500");
And the script is successfully creating a popup window.
now my issue is when i click on the background of my page the popupbox is getting hided.
how to mask the background when popupbox is fired.
Plz help me.
You can use jQuery BlockUI Plugin : BlockUI.
No. There is no way to make a popup window modal. As the name itself suggests that it is a separate window.
If you want, you can use showModalDialog() in Javascript. The dialog allows you to include a jsp or html page inside
http://msdn.microsoft.com/en-us/library/ie/ms536759(v=vs.85).aspx
https://developer.mozilla.org/en-US/docs/Web/API/Window.showModalDialog
Also as suggested by others above, you can go for jQuery.
I would like to improve loading performance for a page that has a button to trigger a popup initially hidden on the page (uses 'modal' component from twitter bootstrap). This popup body contains an iframe, which source is loaded on the page inital load adding about 30-40% more time to load, however. The iframe source is not needed to be loaded till the button is clicked which brings up the popup with the iframe. How can one avoid loading the iframe source on initial page load? ...only load the iframe source when the button is clicked? Can JS be used here? If so, then how or what method/library? Is there a better approach than make popup with iframe hidden in the page to improve loading time? Thank You
This is possible with JavaScript (no extra libraries required).
Simply use a function to set the src/display the frame when a link or button is clicked.
function loadIFrame(frameID, url) {
var frame = document.getElementById(frameID);
frame.setAttribute('src', url);
frame.style.display = 'block';
}
See the example here:
http://jsfiddle.net/ZNGmy/
Rather than having the pop-up as a hidden container that is made visible by the button, make the pop-up with the iframe content a separate html page that gets displayed by pressing the button. This way the content is not loaded until the button is pressed.
This link has an example of popping-up html pages.
http://allwebco-templates.com/support/S_add_pop.htm
I have a popup window, and from there, I want the parent window to reload, but a specific frame not the entire page.
So a user clicks a button from within a frame, it opens the popup. Now from the popup, based on a specific event, I want to reload a frame from the parent window.
Is this possible in IE?
I have a page index.php that has 2 iframes in it.
From the 2nd iframe a new popup window opens.
When the user clicks on a button or closes the popup window, I want to reload iframe#2 (the one that opened the window).
How can I do this?
I have tried:
opener.location.reload();
opener.top.document.getElementById('myIFrameId').location.reload()
opener.myIFrameId.location.reload();
Nothing seems to work.
I found a great jQuery plugin that works in all modern browsers, including IE8.
It allows you to easily call up a secondary browser window with parameters and then your allowed to pass data between the two, similar to how postMessage API works.
These data messages in turn can load new content or alternate webpage into the original iframe2 that's on your parent page once you analyze the incoming jQuery data.
Article: jQuery plugin for communication between browser windows
Online Demo: Parent Page
Download Project: windowmsg.zip
The downloaded files will work directly from your desktop, unlike jsFiddle since it's not permitted there.
Yet another solution that works great when you don't need a secondary browser window and the use of a floating iframe is acceptable, just use a lightbox clone that's iframe capable, such as Shadowbox-js.
The benefit of this method is that your in complete control of how the iframe closes, unlike the above secondary browser window that has it's own browser close button which may not trigger your desired events.
The callback during the lightbox clone closure event can take care of changing the contents in the parent pages iframe 2 as needed. Also, you can choose to have the lightbox bound within the iframe 2 (lightbox clone installed in iframe page), or have it fullscreen (lightbox clone installed in parent page).
In your case, window.opener is the window object of the iframe that opened the popup, so opener.location.reload() should work: Demo
Demo sources:
Main page: http://jsfiddle.net/jefferyto/DWeYZ/
Iframe: http://jsfiddle.net/jefferyto/WWbg9/
Popup: http://jsfiddle.net/jefferyto/TKQUJ/
I kind of rebuilt this functionality here:
http://jsfiddle.net/JBWTn/3/
Clicking the button in the popup will change the border look of a frame in the original window . The key here is navigating through the original window's frames using
window.opener.document.getElementById('[ID_OF_YOUR_FRAME]')
(quite similar to what Frank van Puffelen suggested)
To reload the frame instead of just changing its style, use
window.opener.document.getElementById('[ID_OF_YOUR_FRAME]').location.reload()
...like you tried in your question already.
This question reminded me of the functionality in phpMyAdmin (where you can run SQL queries from a popup window and have the results shown in the main window), so I had a quick look ;)
Have you tried:
opener.frames["myIFrameId"].location.reload();
it will show error "Error: Permission denied to access property 'reload'"
that's possibly "the same origin policy" problem.
or you create a div wrapper over the iframe and re generate iframe again
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();
I am struggling with this, hope something can shed some light.
On click of a button, I want to open a popup window, and transfer data from parent window to a text field in the popup. And, ensure popup is fully loaded before data is filled.
I tried using document.ReadyState=="complete", but it fires before the popup is fully loaded. I also tried to check the popup.body in a setTimeOut method, but to no avail.
Can you please help ?
PS: Popup window is a form from another domain !.
You won't be able to do this unless you control both domains due to XSS restrictions, but if you do control the content on both domains it's fairly simple with a bit of JS in the page you have opened in a frame.
Using window.opener in the frame will allow you to call any functions defined in the main window, this along with the seconds pages onload event is all you need to trigger a function when it loads.
If the content of the second page is not under your control the best thing you can do is an AJAX request which you will then need to be inserted into your page, this is a little nasty but will work.