The following tutorial will show you how to make a simple PopUp window.

Requirements:

For this tutorial you will need to install PopUp Window using one of the following installation files:

1. Dreamweaver Extension for Windows
2. Dreamweaver Extension for Mac
3. Expression Web Addin
4. CSS Menu Studio

 

How to access PopUp Window

Adobe Dreamweaver Extension:

Dreamweaver Extension Manager to install and uninstall all Dreamweaver Extensions.

To get started using Dreamweaver, click the PopUp Window icon by accessing the PluginLab panel, or go to Insert > PluginLab > PopUp Window.

The PopUp Window icon is enabled when a blank or any of your existing pages is opened in Dreamweaver.

Microsoft Expression Web add-in:

To get started using Expression Web, click the PopUp Window icon or go to Tools > PopUp Window.

 

Step 1. Create a link:

Open your page to begin. First you need to create a link to your popup window. It can be text or image link. When the link is added to your page select this text or image and click the PopUp icon to open the PopUp window extension.

In the Setup tab you need to select your popup window options: whether you would like to open the page just in popup window or both in popup and self browser window.

Then define the popup window target URL.

 

Step 2. Customize your PopUp Window:

In the PopUp Window tab specify the width and height (in pixels) of the window's document display area to control exactly the page content you want to appear in the popup window.

Then state exactly where you want the popup window to appear on the computer screen. You can set window position to Absolute to locate the popup in relative coordinates of the parent window. You can also choose random, fullscreen or automatically centered as you wish.

When the Open In option of your window is set to _self + popup you can define the URL that you would like to open in the parent window.

In the Standard Toolbar section customize your popup window toolbar.

Tune additional settings in the Window Options section.

When the Resizable box is checked in the popup window has resize handles around its border. You can also resize it in diagonal. The content gets relayouted to fill the area changed.

You can generate popup window that will be automatically closed after a specified time by setting the time (in seconds) after what the popup window will be automatically closed.

When you're done customizing your popup window options simply press the button.

Anytime you can re-enter the extension, the PopUp window source is read back in allowing you to edit and update your PopUp window.

All the information about your popup window settings is stored in .js file, this enables you to load popup settings from the file and apply to different popup windows you create.