This is working well for me, but I need to make it modal so it doesn't get lost behind the main app screen. Is there a way to easily make this screen modal?
string url = "EditTables.aspx?title=Edit Asset Classifications&prompt=Classification Name&method=GetClassifications&name=ClassificationName&value=ClassificationID";
string script = "window.open ('" + url + "', 'popup_window', 'width=500,height=135,left=200,top=150,scrollbars=0,resizable=no');";
You can't make the popup modal on modern browsers. (There used to be a different method you could use for popup modals, but it's deprecated now.)
By default, that window should appear in front of the window that opens it. You can also respond to clicks on the opening window's document by calling focus on the window returned by open, to bring that other window to the foreground (stopping when you see the unload event from the popup).
If what you're showing in the modal doesn't have to be a separate window, you might consider not using a separate window at all, but instead using an absolutely-positioned div or similar with an element behind it that covers the entire remainder of the window so that it can prevent clicks and similar from reaching the elements underneath it. But if it has to be a separate window, you don't have much you can do other than the focus thing.
Related
I have a page that uses window.open() with a window name to pop up another window that will act as a presentation screen for my app:
window.open(url, 'my-presentation-win', 'resizable');
Now, that works well, and if I trigger that action, and then navigate to a different page, but then come back to the original page and trigger the action again, it brings the original popup window back into focus (the name is honored).
However, if I load the same HTML page in two different browser tabs (Chrome on OSX), and trigger that action in each, I end up with two different windows (each presumably with the name my-presentation-win?). Is there a way for that window to be re-used, when its used by the same app running in different tabs?
I don't think it's possible :(
Access a window by window name
I am rendering a html page that contains a button.
I have bind a method to browser window that opens a gwt popup when the button is invoked.
My problem is, when i scroll the page, the popup stays fixed and the page scrolls. I want the popup to be scrolled along with the html page.
Also, the user should not be allowed to access other parts of app when the popup is open.
Can somebody help me
Assuming you are using the PopupPanel class, it is as easy as calling the right constructor:
PopupPanel(boolean autoHide, boolean modal)
autoHide - true if the popup should be automatically hidden when the user clicks outside of it or the history token changes.
modal - true if keyboard or mouse events that do not target the PopupPanel or its children should be ignored
So if you set the modal parameter, you cannot click outside of the popup, and also the scroll event should not happen at all (that is somewhat right, as scrolling a popup with a fixed positioning doesn't make much sense... Oh well, for a non advertising purpose at least).
I'm having an issue with a our main application's window activating itself when the mouse is hovered over it.
I'm opening the new window in a javascript function using the line below:
window.open(URL, 'Requests', 'location=no,toolbar=no,status=yes,scrollbars=yes,resizable=yes');
I have noticed that if I open a new IE window through Explorer, hovering over our main application's window does not reactivate itself. Even in this case though, the main window does make itself be "on top" of the pop-up window created by the window.open command above.
The question is this: Is there any way, when opening a "child" window in javascript, to detach the child window from the parent?
Further info: I am using an Infragistics WebDataMenu with ActivateOnHover set to true so users don't need to click on main menu items to see sub-menu choices. Unfortunately, that setting sensitizes the whole menu bar so that sliding the mouse through it activates the menu (and sadly the window when a popup is active). This is the root behavior I'm trying to fix.
The window.open(); method will create a popup window that really only shares a relationship through JavaScript via the return value of the call, and the window.opener property on the popup window.
What you want is the behavior of a modal window that locks out interaction from the 'parent' page while you work on the 'child' popup.
You can try to fight with JavaScript (and your users) by forcing a focus on the popup and blocking any blurring but this will drive users nuts when they want to go read their email etc. (eg not recommended)
You can also use the not so standard showModalDialog(); method but support is far from fully cross browser and there are a whole bunch of new problems if you try to use this (no right click in IE, zoom issues in IE, and no grandchildren popups to name a few) (again not recommended)
What you can do is make an "overlay" popup similar to many online photo viewers where you first overlay a mask (typically semi transparent) that blocks mouse/focus on the entire page content below and then overlay that with your "popup content". Just be sure that you provide a close option that removes the mask when the overlay is closed/done.
Note if you need to support IE6 you'll also need an iframe shim (Google if needed)
Many UI frameworks will provide a "dialog" just like this for you. (Eg jQueryUI)
Ultimately, I gave up on making this work. I found that what I had to do was turn off ActivateOnHover from the WebDataMenu, which didn't answer this question and requires users to click on the menu to make it drop down, but it became a work-around.
The question describes exactly what i want to know . What is the difference between a modal window and a dialogue. When a modal window becomes a dialogue and vice versa ? How do i go about achieving both ? A nudge in the right direction will be very much appreciated .
A modal window is a windows that runs on top of an application, so that you can't do anything at all with the applciation until you have closed the modal window.
A jQuery dialog is not a separate window, so technically it can't be a modal window. It can however emulate most of what a modal window does, by putting an overlay element over the rest of the page so that you can't interact with it.
A modal window will not let you continue until you close it.
There are two main categories of temporary windows in IxD:
Modless and Modal
Modless: that dont require users to exit out to access the behind layers - like tooltip, select, popover (non-sticky), menu etc. These dont have the overlay and you can see all the behind layers as-is.
Modals: that require users to take an action before they can access the behind layers - like dialog (a,k,a alert dialog), slide-in-panel, bottom-sheet (new in mobile), popover (skicky). These are mostly required to have the overlay to afford that this is not letting you access the behind layer till you get rid of this.
Visually -- shadows should be reserved for these two in the UI
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.