Home > Demo > How to get started using Web Builder Express > How to create a pop up window

How to create a pop up window 


   

This is an advanced topic describing how to create a pop up window. 

An example of a pop up window is when a visitor clicks on a link, and then a new window "pops" open.  You might want to use a pop open window to allow a visitor to click on a linked word, and then pop up a new window with a definition of that linked word.

Before undertaking this advanced topic, first consider if you really want to create a pop up window at all.  To combat annoying advertisements, many visitors have installed "pop up blocker" software by organizations such as Google.  This software prevents all pop ups, including any pop ups that you will build using the information in this help article.  

As an alternative to pop up windows, you might consider implementing your idea using standard links (see the article titled "How to add a link to your page") or Links within a page / anchors (see the article titled "How to create links within a page (anchors)" ).

There are three steps to creating a pop up window:
1 - Create JavaScript code that will create a function to pop open the new window
2 - Create the code for the pop up window itself
3 - Create a link to the pop up window (created in step 2) using the JavaScript code (created in step 1)

Here are the detailed instructions:

 Step 1
Create JavaScript code that will create a function to pop open the new window


Critical Tip - Save Programming Code Text Before Changing It:
As part of the instructions below, you will be changing programming code in your site template. The programming code appears as text in boxes on the Web Builder Express pages you will use in this section. 

It is easy to make mistakes when changing programming code.  It is critical to save a copy of the programming code text before you change it.  That way, if you do make a mistake, you can go back to the last version of the programming code that worked.

To save a copy of the programming code text:
- Select all the text with your mouse.  You may need to scroll up or down to make sure you get all the text.


To add JavaScript into your web pages, you need to modify your site template.  To do this, you must be using a custom site template.

Navigate to the templates page by following this menu navigation:
 
Summary > Advanced Features > Standard Templates

For your custom template, select the blue Tool icon, and then select Properties.  You will see the programming code for the Template of your web site.

IMPORTANT - before you make changes to the programming code that defines the Template for your web site, but sure to back up the programming code using the instructions above.

Enter the following HTML / JavaScript code immediately beneath the tag in the site template, immediately before the indicator:

< SCRIPT LANGUAGE="JavaScript">
< !-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=100,height=100');");
}
// End -->
< /script>

NOTE: remove the space after each <

IMPORTANT - Make sure that when you paste this code, there are no unintended line breaks in the code, which will cause errors.  Be especially careful that the line that starts with "eval" is a complete line, without line breaks.

This code creates a function called "popup", but you can name the function whatever you wish.  You will use this function to pop open a new with with the attributes described in the function, such tool bar = no, scroll bar = no, resizable window = yes, a width and height =  100.

Save the change to your template.   Republish all the pages in your web site.

IMPORTANT - Do not click Save on the Summary > Advanced Features > Standard Templates page.  This will indicate that you want to change your template - even if you are changing it to the same template - and you will loose all the text on all your pages!  You will get a warning message first.

 Step 2
Create the code for the pop up window itself

If you want to create a pop up window that does not have any standard Web Builder Express features, such as headers, footers, menus, etc., you need to create your own complete HTML file.  Here is a very simple but complete HTML file:

< html>
< head>
< title>
   This is the title of the page.
< /title>
< /head>
< body>
   The body text goes here.
< /body>
< /html>

NOTE: remove the space after each <

To create your own complete HTML file, open up NotePad and paste in the HTML code listed above. Change the text called "This is the title of the page." to the text you want to appear in the title bar of your pop up window.  Change the text called "The body text goes here." to the text you want to appear in the body of your pop up window.

Save the NotePad file with a name that ends in ".html", such as "mypopup.html". 

Upload the file into Web Builder Express by following this menu navigation:

Summary > Content > Files > Add a file


 Step 3
Create a link to the pop up window (created in step 2) using the JavaScript code (created in step 1)

Now that you have defined the JavaScript function for all your pages (step 1), and you have created the .html file that you want to open (step 2), you are ready to create the link that will launch the pop up window.

To create this link in Web Builder Express, edit your text.  View the HTML by clicking on the "HTML" box in the lower left part of the editing window.

Enter this HTML code:

< A HREF="javascript:popUp('/files/mypopup.html')">Open the Popup Window< /A>

NOTE: remove the space after each <

Replace "mypopup.html" with the name of the .html file you created in Step 2.

Replace "Open the Popup Window" with the text you want to appear as the link that will open the pop up window.

Save your page and try out your new pop up window.


 Return to How to get started using Web Builder Express

 

 


 

Learn more

Guaranteed. Try Web Builder Express and enjoy our "60 Day Risk Free Guarantee".

You get a remarkable list of features with Web Builder Express at a great price.

Frequently Asked Questions.

You can take many different approaches to building and managing your web site. Which is right for you?

How to determine if you need a content management system.

Detailed comparison of different content management system vendor's features and costs.

What is important to you when building your web site?

Sign up now and start using Web Builder Express immediately.

webbuilderexpress.com
1201 Greene Square
Celebration, FL 34747
Contact Us
toll free phone: (877) 290-9407
fax: (440) 378-6546

Privacy Policy - Copyright Policy - Site Map Copyright 2002 - 2010 Web Builder Express