alt-web logo

Tips & Tutorials for Web Designers

Monday, March 5, 2012

Create Pop-up Window in Dreamweaver (Behaviors Panel)

This is an old post demonstrating JavaScript Behaviors.  The preferred method now is Modal or Lightbox windows.

Creating a JavaScript Behavior

  1. Insert an image or type some text on your page.
  2. Highlight text or select image by clicking on it and go to the Link field in your Properties Panel as in (Fig. 1).
  3. Fig. 1
  4. Browse for the file or type the full URL: http://example.com
  5. Go to the Behaviors Panel and hit the plus sign (+) to add a new behavior (see Fig. 3)
  6. From the menu, select Open Browser Window (Fig. 2)
  7. Browse to file or type the URL (Yes, a 2nd time).
  8. Set the height, width and other optional attributes for your pop-up window.
  9. Fig.2
  10. Hit OK.
  11. Verify that the behavior's trigger event is <A> onClick.  If it's not, click inside the event box to show other trigger options.
  12. Fig. 3
  13. Go back to the Properties Panel (Fig. 4) and replace the first URL in the link field with javascript:()  This makes the primary link into a null link so the page doesn't open twice.
  14. Fig. 4
  15. Save your page and preview in browsers.
That's all there is to it.  Hope you enjoyed this brief tutorial.