Popup windows

If you're looking for popup images also have a look at:
- Shadowbox
- Highlside JS

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:

Click Here

Example displaying photos:

Example displaying videos:

Click here

Example displaying text:

Click here

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 NOHREF 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 NOHREF 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 NOHREF 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.

This FAQ is also discussed in my WPFAQ.org E-Book (sample)

© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com
Thank you for visiting and supporting my website,
- Cédric -

Now share it…

Share

Comments are closed.