Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

A JavaScript PopUp Generator

5.00/5 (3 votes)
27 Apr 2020CPOL2 min read 5.3K   123  
JavaScript script for creating pop-ups
This article is about a JavaScript script for creating pop-ups with the choice of some customizations to place it on the screen and how to close it.

Javascript Pop Up Generator

Introduction

This is only an informal and not an exhaustive presentation of the script; see above to try it out yourself and download the source and documentation.

Using the Program

The PopUp is created by calling the function: PopUp(parameters) where parameters is an object that contains the parameters necessary to personalize the PopUp:

  • cancel: How the PopUp disappears (by clicking or key like Escape, Delete, ... or after a number of milliseconds)
  • content: the content that must be shown (it is an innerHTML content)
  • class, style: for styling purposes
  • fade: milliseconds related to the appearance and / or disappearance of the PopUp
  • id: id of the (possibly) PopUp container
  • left, top: position on the screen, if omitted the PopUp is centered
  • height, width:  sets the PopUp dimension

Only content parameters is necessary, all others have a default or are optional. For example, this statement... 

JavaScript
popUp({'content': "<img src='images/RabbitLake.jpg'>"}) 

...shows the image centered on the screen without changing its dimensions and deleting is done by clicking on.

How PopUp Works

The PopUp is inserted in a div tag newly created; the div becomes a child of the possible id provided via parameters, otherwise, it is inserted at the beginning of the page:

JavaScript
(document.body.insertAdjacentElement('afterbegin',link))

If the cancel mode is by clicking or by a key, a suitable event listener is added:

PHP
...
if (typeof parms.cancel == "number") setTimeout(closePopUp,parms.cancel-fade[1],fade[1]);
else if (typeof parms.cancel.toLowerCase() != "no"){
	if (parms.cancel.toLowerCase() == "click") {
		link.addEventListener("click",clickOnce);
	} else
		window.addEventListener("keydown", hitOnce);
}
...

The div created is removed when the cancel mode chosen (clicking is the default) occurs and the event listeners are removed.

Some Examples

Fade, Style and Escape Key to Close

JavaScript
var parms = {'fade':'2000 2000','cancel':"Escape","style":"text-align: center"}
parms["content"] = "<H3>Rabbit lake near Montalto Dora</H3><img src='images/RabbitLake.jpg'>";
popUp(parms);

Show Random Images as Splash

Below is an example of splash with fade effects receiving a random image by a PHP script on server.

JavaScript
...
var parms = {'fade':'2000 2000','cancel':5000}
parms["content"] = "<img src='getImage.php?R="+Date.now()+"'>";
PopUp(parms);
...

The ?R="+Date.now() is to avoid the image caching.

PHP
<?php
function randomImg($folder) {
	$aImages = glob($folder . '/*.{jpg,jpeg,png,gif}', GLOB_BRACE);
	shuffle($aImages);
	return array_pop($aImages);
}
$fileImage = randomImg("images");
$aMimeTypes = array('jpeg' => 'image/jpeg',
		'jpg' => 'image/jpeg',
		'png' => 'image/png',
		'gif' => 'image/gif',);
$path_parts = pathinfo($fileImage);
header("Content-type: ".$aMimeTypes[$path_parts['extension']]);
readfile("$fileImage");
exit(0);
?>

Conclusion

This lean script allows you to create pop-ups for splash information, galleries or help online with a few lines of code; in particular, for the latter two it is possible, in a next version, to simplify their use.

History

  • 27th April, 2020: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)