Popup HTML5 Window Script

Mobile compliant responsive HTML5 CSS3 popup window script

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