Popup HTML5 Window Script

Mobile compliant responsive HTML5 CSS3 popup window script

Pinned Note Free Scripts
Let's say you want one of your HTML pages to open as a pop-up and not as a regular linked page. For example for an F.A.Q. page. Use the code shown below to do this:

Click to View Popup Window Example

Step #1:
Click here to download the .zip file with the .js pop-up file and sample pop-up HTML page. Put these files in your website folder. They should not overwrite any existing files.

Copy the "picts-popup" folder from the zip file into your website folder.

Step #2:
Select, copy, and add the following code to the head area just before the </head> of any HTML page you want to be able to open the pop-ups. (the .zip file includes a sample page).

<script type="text/javascript" src="pop-up.js"></script>

Step #3:
Select, copy, and paste the following code into your html page where you want a link for the pop-up to pop open from.

<a href="javascript:popmeup('pop-up.htm')">Link or graphic here</a>

Step #4:
Edit your pop-up.htm page (included in the download) with your own info, links and images. The sample webpage in the download is a standard HTML webpage you can edit normally and includes a css file for colors and fonts.

Adding the popup link to a menu.js or other .js file:
If you are adding this popup link to a menu.js or other .js file, you will add a \ in front of every ' in your link. Here is an example:

document.write('<a href="javascript:popmeup(\'pop-up.htm\')">Link Name</a>');

In the above we have added two \ like the following: \'pop-up.htm\'

Adding extra pop-ups:
You can have many pop-ups on one page. Edit the "pop-up.htm" in the code below for additional pages and copy the "pop-up.htm" and give it the name you edited the link with. Make sure the names match exactly, hosting is case sensitive. Second pop-up link example:

<a href="javascript:popmeup('pop-up-2.htm')">Link or graphic here</a>

NOTE: Only edit the area in red for the second pop-up. Make sure you create a page called "pop-up-2.htm" for the above example.

Related Topics:
Open in a new window, target links