Popup windows

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 PhpBB?

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: Codes
3.1 Popup from text
3.2 Popup from an image
3.3 Popup from a rollover image
Chapter 4: How to add the codes to your forum

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

Have a look at Empty blank page.

Chapter 3: 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

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

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

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

Chapter 4: How to add the codes to your forum

Have a look at Customize styles or themes.

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.


PhpBBFAQ.org - Tutorials, Tips & Tricks is 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 -

Comments are closed.