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.
Related
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
I don't think this is possible but I thought I'd ask anyway.
I'm building a Wordpress plugin for sharing buttons and Buffer doesn't have a mechanism to return to the site if you locate in the same window, so I built out a nice popup that will fetch the add link. This works great except that the buffer add page creates a modal dialog that is positioned 100px from the top.
This creates a nasty 100px space above the dialog. See here:
I was wondering if it's possible to change the css inside that popup window, or perhaps find a way to have the window directly access just the div with a specific id?
The modal is draggable as well, so maybe create a drag action to drag it up to the top?
Any ideas would be helpful.
--EDIT--
Adding Fiddle as requested.
Not sure what the size of the window will be when you're not logged into Buffer, but you'll get the general idea of how the spacing is messed up at the top ... maybe.
SO won't let me add a fiddle link without code the post is: jsfiddle.net/y6RQ7/6/
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.
So i tried searching for what I looked for but I couldn't really find exactly what I was looking for, if it even is possible that is.
What I'm looking for is a way to make the links people click on my website appear almost as ads, not a seperate window or tab in the browser but its own small window on the current tab itself. I made a image as a sort of example of what I mean. I don't know if it'll do any good but its worth a shot, I'd love to have it be able to work with Coolmenu as well. And if people wanted to open them in a new window or new tab, they could just right click, like below:
Update: 10:32 7.11
I realized that both of these links, as well as when i searched for some on my own all date form like 2006-2009, whereas all of them use
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
</div>
</div>
I think I can just write () (correct me if im wrong) as well as the paragraph stuff, but what should I do about all the ? should I just straight out remove it or replace it?
Update 10:50 7.11
I don't got more time to work on it today but next time I got some time, should I post all the other javascript and css I have on my page (only coolmenu that is) to give you some sort of idea of what exactly I want to accomplish?
And again, thank you all for the great help.
Update 12.11 08:05: I'm having trouble getting it to work together with Coolmenu.
I can provide with my css and javascript code for both coolmenu and the window thing if required, should i upload a .txt or just put it here?
Modal Windows
I guess you wanna make Modal Windows. You can easily do that using this tutorial here: Simple jQuery Modal Window Tutorial.
Screenshot:
Demo here: Demo
jQuery Dialog
Or you can even use jQuery Dialogs, which uses same principle, but easy to implement.
Although you don't want to open a new window, this is the quickest way you will get it to work how you want and involves the least amount of javascript.
Code:
Hi
Parameter 1 is the URL, parameter 2 is the name of the window.
In the 3rd parameter you can pass the following options:
status: The status bar at the bottom of the window.
toolbar: The standard browser toolbar, with buttons such as Back and Forward.
location: The Location entry field where you enter the URL.
menubar: The menu bar of the window
directories: The standard browser directory buttons, such as What’s New and What’s Cool
resizable: Allow/Disallow the user to resize the window.
scrollbars: Enable the scrollbars if the document is bigger than the window
height: Specifies the height of the window in pixels. (example:
height=’350′)
width: Specifies the width of the window in pixels.
For more info click here
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.