What can popup windows be used for? How can I create a page to display in the popup window? How can I add Popup windows in WordPress? How can I add centered popup windows in WordPress?
Chapter 1: What can popup windows be used for? Some examples...
Chapter 2: How to build a page to display inside the popup
Chapter 3: How to have image popups
Chapter 4: Codes
4.1 Popup from text
4.2 Popup from an image
4.3 Popup from a rollover image
Chapter 1: What can popup windows be used for? Some examples...
Examples playing music:
Example displaying photos:
Example displaying videos:
Example displaying text:
Chapter 2: How to build a page to display inside the popup
1. Click here to download an empty HTML file
2. Open it in an HTML editor or a full text editor like TextWrangler (Mac) or Notepad (Windows) to edit the settings for the background, change the settings for the fonts and add your content
3. Upload this file to the root of your server for the URL to be
http://yourdomain.com/nameofthepage.html
Replace page.html in the codes with this URL.
Chapter 3: How to have image popups
You may also want to have a look at Highslide.
The first step consists in uploading the image to your server as follows...
1. Create a new folder in the folder you publish your website to from iWeb
2. Name this new folder something like 'files' or ‘media’ or whatever
3. Copy your .jpg or any other image file to that folder
4. Upload the folder to your server using your FTP application
5. http://yourdomain.com/nameofthefolder/nameofthefile.extension is the address at which the file will be stored on the web
Example: http://yourdomain.com/media/nameofthefile.jpg
or upload it through WordPress and copy its URL
It is recommended to upload two versions of the picture: a smaller version and one of the size you want it top display in the popup. The smaller version will be used on the page since it loads faster, the other one will be used in the popup. Of course you can also upload only one file and use it for both if you want.
Take code 4.2, 4.3, 5.2 or 5.3 and use the path to the image as the URL to open in the popup.
Chapter 4: Codes
To open the pop up you can have people clicking on a text-link, on an image-link or on a rollover image-link.
General instructions:
Replace page.html with the URL to the page you want to display in the popup window or to the URL of the image you want to display inside the popup window
Edit width=300, height=200 to the size you want the popup window to be and to fit the content of the popup window
Once you edited the code copy and paste it into your page or post
4.1 Popup from text
<A HREF="#" onClick="window.open('page.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=300, height=200');return(false)">TextToDisplay</A>
In addition to the general instructions change TextToDisplay to the text you want to display as a link to open the pop up window.
4.2 Popup from an image
<A HREF="#" onClick="window.open('page.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=300, height=200');return(false)"><img src="URLofTheImage" style="width:281px; height:100px; border:0px solid #cc3300;"></A>
In addition to the general instructions change URLofTheImage to the URL of the image you want to display as a link to open the pop up window and edit the width and height of the image.
4.3 Popup from a rollover image
<A HREF="#" onClick="window.open('page.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=300, height=200');return(false)" onmouseover="document.sub_but.src='http://yourdomain.com/onroll.jpg'" onmouseout="document.sub_but.src='http://yourdomain.com/normal.jpg'"><img src='http://yourdomain.com/normal.jpg' style="width:281px; height:100px; border:0px solid #cc3300;" alt="Move your mouse over me" name="sub_but"></A>
In addition to the general instructions read the Rollover images and buttons FAQ
Note: With all the previously described methods people will have to click to open the player and music start playing. There's a code that actually opens the popup window automatically when someone is visiting a page. The problem is: Most browsers will block it due to security reasons. Most people have “Block auto-popup windows” enabled in their browsers. The window will not popup for them. They just get notified that the browser blocked a popup and can then chose to allow it. And if you put the code to every single page I guess a window will pop up on every single page a user looks at. Bottom line: it’s not recommended to use it, thus I will not provide it here.
