JavaScript : Pop-up Windows

Pop-up-Windows

JavaScript allows you to create (open) new windows. In these windows you can place whatever HTML code you wish, and even have actions in one window effect what is happening in another window,

The code to open a new window is fairly straight forward, it only gets complicated when you add in all the different options available, and navigating around the different windows.

Open Window 1

The statement used to open the Window 1 is:

window.open(“win1.html”,”Window1″,
“menubar=no,width=400,height=300,toolbar=no”);
Looking at the above example, the syntax is first to specify the web page to load into the window, next title the window, and finally specify the options for the window. Notice: the options are all in one set of quotes.

Available Options for JavaScript windows are:

Option Values Description Version
location yes|no Does the location bar show? ver 1.0
menubar yes|no Does the menubar show? ver 1.0
scrollbars yes|no Do scrollbars show? ver 1.0
status yes|no Does the status bar show| ver 1.0
titlebar yes|no Does the titlebar show? ver 1.0
toolbar yes|no Does the toolbar show? ver 1.0
resizable yes|no Can you resize the window? ver 1.0
height pixels height of window ver 1.0
width pixels width of window ver 1.0
directories yes|no Does the personal toolbar show? ver 1.2
innerHeight pixels specifys the inner height of window ver 1.2
innerWidth pixels specifys the inner width of window ver 1.2
screenX pixels specifys distance from left edge of screen ver 1.2
screenY pixels specifys distance from top edge of screen ver 1.2

An important way of navigating among windows is to give the window a name, or assign it a variable. To do so just set the name (variable) you want equal to the window.open statement. For example:

win2 = window.open(“win2.html”, “Window2”, “width=300,height=200,scrollbars=yes”);
Click Here to Open Window 2, you can notice what the default settings are for the numerous options, with Window2.

Now if you opened Window 2, and read it, you should have returned to this page via the focus change. If you didn’t, what are you waiting for. We can close Window 2 from this page by by clicking this link.

(win2.close() is the statement used)
You can open an window, without first specifying an HTML to load into it, and then write out HTML directly to that window. Click Here to Open Window3, once the window, switch back to this page and Click here to write to Window3. You may have to switch back and forth between the windows to see that something was written there. The statements used are:

// open thw window
win3 = window.open(“”, “Window3”, “width=300,height=200,scrollbars=yes”);

// write out to window
win3.document.writeln(“<H2>This is written to window 3 by the main window</H2>”);
An example use of having a separate window open is to use it as a site navigation tool. You can place links to different sections of a web site open in a window, and then while navigating the site, the whole site links are always present.

When using links in an opened window you will need to reference the ‘opener’ window to have links opened in that window. This can be done by writing a function in the opened window which point links to the opener window. For example:

function openURL(sURL) {
opener.document.location = sURL;
}

<A HREF=”javascript:openURL(‘home.html’)”>Go Home & </A>



Copyright 2017 JSResource.com. All rights reserved.

Posted January 15, 2017 by in category JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *