Complete Javascript popup opener

Opening popups in JS is simple, but sometimes in the same page we need to open popups with different features. There are several scripts in the net doing this task but, as usual, none of them seemed to fit my needs

I decided to code a complete javascript popup opener in order to have one function that I can use in any situation.

These are the customizable parameters of your popup:

url: the string representing the url of the page you want to open in the popup. Default value: this page.

width: popup width, in pixels. If you enter a value between 0 and 1, it will be parsed as a % of screen width. For example, if you enter 0.5, it will be parsed as 50% of screen width. Default value: half of the screen width.

height: popup height, in pixels. If you enter a value between 0 and 1, it will be parsed as a % of screen height. For example, if you enter 0.5, it will be parsed as 50% of screen height. Default value: half of the screen height.

xpos: x position of the upper left corner of the popup. It can be an integer or “left” or “right”. If you enter “left” your popup will appear in the leftmost part of the screen, if you enter “right” your popup will appear in the rightmost part of the screen. Default value: the one that will center the popup horizontally

ypos: y position of the upper left corner of the popup. It can be an integer or “top” or “bottom”. If you enter “top” your popup will appear in the topmost part of the screen, if you enter “bottm” your popup will appear in the bottommost part of the screen. Default value: the one that will center the popup vertically

xoffset: an integer representing amount of pixels, positive or negative, that will place the popup respectively to the left or to the right from its horizontal position. Default value: 0

yoffset: an integer representing the amount of pixels, positive or negative, that will place the popup respectively up or to the down from its vertical position. Default value: 0

name: window name, passed as a string. Default value: “propup”

scrollbars: can be “yes” or “no”, defining if the popup window will have scrollbars. Default value: no

resizable: can be “yes” or “no”, defining if the popup window can be resized. Default value: no

status: can be “yes” or “no”, defining if the popup window will show the status bar. Default value: no

locat: can be “yes” or “no”, defining if the popup window will have the location bar. Default value: no

toolbar: can be “yes” or “no”, defining if the popup window will have the toolbar. Default value: no

Let’s examine the script:

var propup = function(o) {
	o.url = (typeof o.url == 'undefined') ? 'http://www.emanueleferonato.com/2007/09/21/complete-javascript-popup-opener/': o.url;
	o.width = (typeof o.width == 'undefined') ? screen.width/2 : o.width;
	o.height = (typeof o.height == 'undefined') ? screen.height/2 : o.height;
	if((o.width<=1)&&(o.width>0)){o.width*=screen.width}
	if((o.height<=1)&&(o.height>0)){o.height*=screen.height}
	o.xpos = (typeof o.xpos == 'undefined') ? (screen.width/2)-(o.width/2) : o.xpos;
	o.ypos = (typeof o.ypos == 'undefined') ? (screen.height/2)-(o.height/2) : o.ypos;
	o.xoffset = (typeof o.xoffset == 'undefined') ? 0 : o.xoffset;
	o.yoffset = (typeof o.yoffset == 'undefined') ? 0 : o.yoffset;
	o.name = (typeof o.name == 'undefined') ? 'propup' : o.name;
	o.scrollbars = (typeof o.scrollbars == 'undefined') ? 'no' : o.scrollbars;
	o.resizable = (typeof o.resizable == 'undefined') ? 'no' : o.resizable;
	o.status = (typeof o.status == 'undefined') ? 'no' : o.status;
	o.locat = (typeof o.locat == 'undefined') ? 'no' : o.locat;
	o.toolbar = (typeof o.toolbar == 'undefined') ? 'no' : o.toolbar;

	if(o.xpos == "left"){o.xpos=0;}
	if(o.xpos == "right"){o.xpos = screen.width-o.width;}
	
	if(o.ypos == "top"){o.ypos=0;}
	if(o.ypos == "bottom"){o.ypos = screen.height-o.height;}
	
	o.xpos += o.xoffset
	o.ypos += o.yoffset

	var scrollbarstext = 'scrollbars = '+o.scrollbars+",";
	var resizabletext = 'resizable = '+o.resizable+",";
	var statustext = 'status = '+o.status+",";
	var locationtext = 'location = '+o.locat+",";
	var toolbartext = 'toolbar = '+o.toolbar+",";

	features = scrollbarstext+resizabletext+statustext;
	features = features + locationtext+toolbartext;
	features = features + 'width = '+o.width+',height = '+o.height;
	features = features + ',top = ' + o.ypos;
	features = features + ',left = ' + o.xpos;
		
	var win = null;
	win = window.open(o.url, o.name, features);
}

Line 1: Function declaration, with only one parameter. That’s possible because I am passing a Javascript object structure into a function as an argument. It’s a very good technique mostly because it allows flexibility in the order you will pass the arguments, and provides flexibility on optional arguments too. You will understand this technique later, when I will explain how to call the function.

Line 2: I am using a ternary operator to set a default value of “url” if the user did not specify it when called the function. Basically this line can be translated into:

if(typeof o.url ==  'undefined'){
	o.url = 'http://www.emanueleferonato.com/2007/09/21/complete-javascript-popup-opener/';
}
else {
	o.url = o.url
}

Where the “else” statement is pretty useless. We can say that line 2 assigns a default value to “url” if not provided by the user

Line 3: Assigns a default value to “width” if not provided by the user. In this case the default width is half of the screen width.

Line 4: Same thing with the height

Line 5: If width is a number between 0 and 1, then I assign to width the (width*100)% of the screen width.

Line 6: Same thing with the height

Line 7: Assigns a default value to “xpos” if not provided by the user

Line 8: Same thing with “ypos”

Line 9: Same thing with “xoffset”

Line 10: Same thing with “yoffset”

Line 11: Same thing with “name”

Line 12: Same thing with “scrollbars”

Line 13: Same thing with “resizable”

Line 14: Same thing with “status”

Line 15: Same thing with “locat”

Line 16: Same thing with “toolbar”

Line 18: Assigning 0 to xpos if xpos was “left”. In this way the popup is at the leftmost of the screen

Line 19: Same concept with the right

Lines 21-22: Same concept with “ypos”

Lines 24-25: Adding the x and y offset to x and y positions

Lines 27-31: Declaring strings according to passed arguments

Lines 33-37: Constructing the string with popup attributes

Lines 39-40: Calling the javascript classic window.open with all arguments. You can find more information about HTML DOM open() Method at this page.

Now let’s see how to use this function. As I said, you can pass arguments in the order you prefer and if you even decide if passing arguments or letting the function use its default values.

This is the source code of a typical page using propup





	
		
		
  1. Default popup
  2. Opening Google
  3. 700x200 popup
  4. 30%x200 popup
  5. Popup in the right bottom end of the screen
  6. Popup 100 pixels far from the right end of the screen
  7. Popup with scrollbars
  8. Resizable popup
  9. Popup with status bar
  10. Popup location bar
  11. Popup with toolbar

And this is the result:

As you can see, there is not limit about the number of arguments you can pass or the order you are passing arguments in.

Simply copy the code, use it and enjoy! Should you use this function in your site, please let me know! I would be so proud (almost…)

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers