Create Dreamweaver Popup Windows

To practice creating Dreamweaver popup windows, open a new HTML file and save it with the name “popup_demo.html.” Add some text to the page so there will be more there than just an eventual small popup window. You will be working with the “Behaviors” function in Dreamweaver, so click on “Window” and “Behaviors” or simply press “Shift” and F4” in combination. You will use the Behavior panel, not the “Server Behaviors,” which is on the same drop down list from the Window menu.

You only need one behavior if all you want to do is have a popup window display when the page loads. To do this, click the “Plus” (+) sign in the Behaviors window and choose “Open Browser Window.” Usually a designer will not want this showing from the start, so you need another behavior. If you already selected the open browser window option, highlight it and click the “Minus” (-) sign to delete it. Then define a new behavior to activate only when the user clicks on a hint or moves the mouse. For this example, add some text or an image to the original page to cue the user, for example, “Click here for more information.”

Highlight this new text and in the Property Inspector box at the bottom put a “Pound” (#) sign in the “Link” box. This will make the text appear as a link. While the text is still highlighted, open the Behaviors panel again and Click on the plus (+) sign in the Behaviors panel to display some options. Select the “Open Browser Window” option. Go back, look at the list of events, and double-check that this action appeared next to the “onClick” event. If it did not, click the drop down link next to whatever event shows that action. Click the drop down connector and change it to onClick. For some reason, sometimes Dreamweaver connects the desired event with the wrong trigger.

An alternative way to do this is by selecting “Popup Message” from the Behaviors list, which then offers a way to enter a similar cue. However, this creates an actual box on the screen with the message. The preceding way seems a bit cleaner.

 

Now create the popup part of this process. In that same Behaviors list, highlight “onClick.” Move the cursor over to the empty box next to this and then click the “Plus” sign again. From the drop down list you saw before when creating a popup message, select “Open Browser Window.” This will open a window where you can enter the URL of what you want to appear, set the height and width, and choose whether to include some additional attributes. These are:

• Navigation toolbar
• Location toolbar
• Status bar
• Menu bar
• Scrollbars as needed
• Resize handles

If the popup window will exceed the size you set, then check the “Scrollbars as needed.” Use whatever other attributes that fit with the window. Provide a “Window name” in that last box. This name cannot include spaces. Click “OK and save your work. Check the associated images to see how this screen looks.

 

Test your work at this point. Locate the HTML file with Microsoft Explorer. Right click on it and select a browser. Note: You may or may not have to change popup settings and Firefox may display the popup higher on the screen than Internet Explorer. The associated image here is the way it should look on a live server.

This article was developed in Dreamweaver CS3 but was tested as well in Dreamweaver CS4. The development process in the latter is very similar in the basics steps, given the changes in how windows appear in the newer version.