I want to have a javascript/jQuery popup window (child page) that is always in front of the parent page, something like facebook's current picture viewing feature.
it would be closed by the user clicking on the close button.
I have tried as below:
mywindow = window.open ("DownloadForm.aspx", "mywindow","location=1,status=1,scrollbars=1, width=350,height=150");
mywindow.moveTo(350, 350);
this code successfully opened a child page in front of the parent page, but there is jQuery code ( $(#test).click() ) on the parent page which causes the parent page to always be in front.
I tried putting the window.open() code after $(#test).click(), but it didn't solve the problem.
The $(#test).click() is necessary, therefore I need to have a workaround.
I appreciate any help, thank you in advance.
myWindow.focus()
Many modern browsers prevent this from working, but it's the only way.
use following javascript code in the page you are opening in popup
<body onblur="self.focus();">
Im sure you cannot control the order of the window. Instead of a popup (which is often and usually blocked by browsers) why not investigate using a lightbox javascript plugin. They are usually free, stylish and work well.
Just set it from the modal css. The z-index is normally set to 1. Just change it to 9999. That is the purpose of the z-index, to set the popup top level.
If not using bootstrap popup, then you need to use css to set it. Browsers are not guaranteed to place nice with .focus() on a window.
Related
I want to refresh my parent window when I close the popup.I could use following
window.opener.location.reload();
But my requirement is slightly different in that I have to write all this code for refreshing the parent page in the parent page itself.
I cannot write a single line of code in the popup.
Thanks,
The only way I know is by checking child window status at frequent intervals but this is explained clearly in this question
That said, I don't know if that could be an alternative, but using a lightbox instead of a new window popup would allow you to keep full control on your events as the whole thing stays in the same window.
Most lightbox API's offer that kind of functionality (loading an external site in the lightbox instead of the usual image), using dynamically generated iFrame to display the external site. This solution also have drawbacks (e.g.: frame-busting code on site loaded in lightbox) but can look nicer than a plain old new window...
I've been using Shadowbox on projects for quite some time now and always liked it, but there are plenty of others out there, maybe even better.
You need to handle the unload event handler in the pop-up and do the reloading in the main window. In the main window, add JavaScript:
function popUpClosed() {
window.location.reload();
}
In the pop-up:
window.onunload = function() {
if (window.opener && !window.opener.closed) {
window.opener.popUpClosed();
}
};
So the answer to your question is generally no, if you need your code to work in all browsers, in particular IE.
The company I work for is trying to come up with their own version of embed buttons. The logic is similar to what Twitter and Facebook offer. Unlike Twitter, we are using modals in-place of opening a new window. As the moment, we have developer a modal library which suits our needs.
Now, I will explain the process we are following:
Our embed script will be loaded in the user's website.
It looks for a link which we will provide to the user, and an iframe will be loaded in place of it.
The iframe uses two scripts — jQuery and our modal library.
On clicking the button present inside the iframe, the modal should open but it is present on our domain and it should open in the parent window.
From my analysis of the situation, I have come up with the following questions:
I have looked around the net but I have a feeling that opening a modal inside a parent window is not possible. Is there a workaround for this?
To prevent clickjacking we have set X-Frame-Options to SAMEORIGIN. How can we load content in an iframe from our website?
If we skip loading the button inside the iframe and modify the parent DOM, we can use our modal script, but applying our own styles to the buttons becomes a pain as we will be using important! for all styles. What other options are we left with?
To answer your first question, it isn't impossible as I've done something similar, thus I think it should solve your third question as well.
So on the parent page you would have a script such as
function showModal(display) {
var colorbox = $('#colorbox');
var overlay = $('#cboxOverlay');
if (display) {
colorbox.fadeIn("medium");
} else {
colorbox.fadeOut("medium");
overlay.fadeOut("medium");
}
}
I've used colorbox but you could use your custom modal, I've also used a parameter so you can show and hide it as you please.
Then from your iframe you could use this script to call your modal
javascript: window.parent.showModal(true);
Hope this helps.
1) Why dont you just open the modal from the iframe? It will make no difference if you call it from parent window or the child window.
2) Use JSON-P
I am using this jQuery plugin http://jacklmoore.com/colorbox/ to show a popup window. There is a link in the content of the first popup clicking on which triggers another small popup window. I'd like to have this second popup without closing the first one. Is it possible to achieve this without changing much in the plugin?
There would be no way to do that without significantly altering the plugin. Sorry.
Assuming you have the chops, consider using ColorBox with the html parameter for the first popup window. In the HTML, develop your own window, eventing and handler (with Jquery). Just a thought.
when you visit http://www.daniweb.com you get a popup window, what is this called + any idea how to do it?
Thank you for your reply, what is the simplest way to do have a modal loading animation only i.e. when page loads that animations shows and when done the animation goes? ASP.NET/Ajax
You'd call this a modal dialog, and you can implement one very easy with jquery ui:
http://jqueryui.com/demos/dialog/#modal
I like to refer to these windows as ANNOYING
The other name is some form of JS or JQuery.
Its called a javascript popup window.
Here's a link to show you how to open a js window
The way it looks though is they are using the modal popup extender provided by the ASP.net AJAX Control library. This can be simulated via JQuery as well.
It's called a modal dialog window. "Modal" meaning "mode" as in the UI has two modes, one where you can only interact with the dialog window, the other where there is no dialog window and you can interact with the rest of the page.
Probably looks something like a lightbox/thickbox .Showing some text/html instead of images
This is a modal pop up window, meaning you can't do anything else while that window is open.
Here are a bunch of ways to make them.
You can set up this kind of popup by having Javascript on the onload event create an overlay div that has height 100% and a higher z-index than the content, and also a div for the popup with position fixed and an even higher z-index. Then when the user clicks on close or otherwise it is time for the popup to go away, the Javascript can set display: none on these divs.
You can use Firebug (or IE Developer toolbar) to see the styles used on the example page you mentioned and use that as a model.
(Also they are annoying, but at least better than pop-unders, IMO ;-) )
Thats a modal dialog popup. Here's a nice jQuery version that I have used before.
I need to open a popup Window to a cross domain content. I should not allow the user either to access or close the parent window, till i am done with Child window.
The main issue with Modal window is that stops any asynchrnous process running on the main window. For example, timers and auto refresh wont be working in the parent window.
Is there any perfect way to do the above said.
Thanks in advance
How about instead of popping up an actual window, you just open a pseudo-window...that is a div with some borders, make it draggable if you want, and place a large semi-transparent div that covers the rest of the page and blocks it from being clicked on. Basically do something like how Lightbox works
You could use a fake window built via javascript. Several widget libraries have support for this. For example, see ExtJS, which also supports modal windows but it might be overkill for your application. For jQuery, browse through the plugins, like this one
I think Telerik has a control for this if you are working on ASP.Net. Uses a div in its implementation as #Davr suggested. Modal windows are a bad option anyhow as they are not supported on all browsers.
In addition to what Davr and thoriann said, you will likely need to make an Ajax call to grab the content. Since Ajax calls via the browser enforce the same-domain policy, you will need to make an Ajax call to your OWN server, which in-turn will need to make an xmlhttp sever-to-server request to grab the content the third-party server.
I feel the above answers wont fit for the following reasons..
JasonS Solution - The application is developed on J2EE technologies.
Other's solution - Some of the the URL Launched in the child window will communicate to the parent window through standard APIs. If i am using div or other in-built plug-in windows, then those javascript API will fail.
Check out the Jquery plug in "BlockUI". When BlockUI is called the parent window is not accessable. You can do what you want on the modal then call "UnblockUI" to close the popup and give parent control again.
Pete