Javascript: Creating a basic popup window

No Comments

Javascript gives you the ability to open new windows in you’re browser. You’ll also have the ability to run any code in these windows, you could even have actions in the one window that will affect another window.

The following statement is used to open up a basic popup window

window.open(“popup.html”,”PopUp Window”,”menubar=no,width=600,height=360,toolbar=no”);

The syntax for the example above is to first specify the web page to load into the window, then the title of the window. And last we specify the options for the window.

NOTE: The options are all in a single set of quotes.

To use the above code. (Example).

Create a Javascript function popUp(); in the Javascript tags defined. And place the code above in the function.

Example:

function popUp(){

window.open(“popup.html”,”PopUp Window”,”menubar=no,width=600,height=360,toolbar=no”);

}

Now call the function by placing it into an anchor tag (<a></a>) or where you wish to.

Example:

<a href=”javascript:popUp();”>OPEN WINDOW</a>

To close the window place the following code in the page that is being displayed in the popup

<a href=”javascript:self.close()”>CLOSE WINDOW</a>

Options for JavaScript Popups

OptionValuesDescriptionVersion
locationyes|noDoes the location bar show?ver 1.0
menubaryes|noDoes the menubar show?ver 1.0
scrollbarsyes|noDo scrollbars show?ver 1.0
statusyes|noDoes the status bar show|ver 1.0
titlebaryes|noDoes the titlebar show?ver 1.0
toolbaryes|noDoes the toolbar show?ver 1.0
resizableyes|noCan you resize the window?ver 1.0
heightpixelsheight of windowver 1.0
widthpixelswidth of windowver 1.0
directoriesyes|noDoes the personal toolbar show?ver 1.2
innerHeightpixelsspecifies the inner height of windowver 1.2
innerWidthpixelsspecifies the inner width of windowver 1.2
screenXpixelsspecifies distance from left edge of screenver 1.2
screenYpixelsspecifies distance from top edge of screenver 1.2

 

Image Credits: Photo by Isis França on Unsplash.

Related Articles

No results found

Leave a Reply

avatar
  Subscribe  
Notify of
Menu
Copy link