I'm not sure how to describe it properly but I will try.
Currently I have a page with stuff in it and I want to have a button that when pressed it will open a new window with more stuff in it that's part of the same "entity", meaning I want to transfer variables from the 2nd "pop-up" window to the first.
The idea is that I need a lot of space and one page isn't enough (no scrolling). So I want to have more divs in this new "pop-up" window. (If I make a regular div to be the popup I won't be able to drag it around outside the window)
In the following image is kinda what I want to have (The 2 monitors are just to make my request clearer)
All responses are appreciated
*I use pure JS
Related
I am creating a program where i use popup with the help of javascript window.open(). It is working fine but i want to make it sticky popup. Here i try make you understand what i'm looking for. For ex. I have page called add_data.php in this page i have button called upload picture when i click upload picture button a popup appears where pircture can b uploaded. But i dont want to user allow to do anything on other tabs until upload picture tab is completed or closed. In other words i want to stick the picture upload popup.
There is no way to make a new browser window modal.
People doing this sort of thing generally use DOM manipulation to display new UI elements on top of the current page (which block accesses to the rest of the page using overlays and methods to disable access with the tab key etc).
There are lots of JavaScript libraries / UI frameworks that provide a modal.
On the page linkvertise(dot) com I noticed that if you click on the Premium button in the upper right corner, completely new HTML markup appears in the source code. And if you click again, the new markup disappears.
My question is, what is the most up-to-date way to make a modal window appear? An already created window with display none or a window that is being created on button click?
I don't think that beetween the two options there is one more up-to-date.
But I would say that using an already ceated window is more efficient :
Using an already created window is simpler while coding
It uses less CPU
It uses les files, so less memory.
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
I should preface this with the fact that I know virtually nothing about javascript and, apart from very rare situations like this, I don't really plan on using it much. So please forgive me for not having tried to learn more about it in order to try and solve this problem for myself.
The Situation:
I frequently like to make use of popout browser windows. To do this I created a bookmark in my browser that contains this small piece of Javascript I copied from somewhere – I can't remember where – and adapted to suit my screen:
javascript:%20var%20WindowPopup%20=%20window.open(window.location.href,'PopUp','left=1150,top=830,width=660,height=410,scrollbars=yes,location=no,status=no');
The Problem:
As things stand, when there is an existing popout window and I select the bookmark again, the same popout window is re-used if I'm at the same site, otherwise a new popout window is created. But there are many occasions when I would like to override this default behaviour.
Three Qustions:
How can I force popouts to always open in a new window?
How can I force popouts to always re-use an existing window?
Combining the previous two options: is it possible to detect if there is an existing popout window and prompt me as to whether I want to re-use it or open a new one?
Your help will be greatly appreciated.
The String "PopUp" in your bookmarklet is the name of your popup window. If you create another popup window using the same name, the already opened window will be reused.
If you want to get around this behavior, you will have to create a popup window with a unique name every time.
The following bookmarklet code will append a timestamp to the name of the popup window creating a unique name:
javascript:%20var%20WindowPopup%20=%20window.open(window.location.href,'PopUp'+Date.now(),'left=1150,top=830,width=660,height=410,scrollbars=yes,location=no,status=no');
This should work unless you're opening multiple popups within a millisecond.