Popup Window in Dreamweaver – How to Create it?

This is very useful technique in Dreamweaver, by using this technique you can take Large view of your thumbnails. Instead of opening picture in new window, we normally use Popup window. So very short but informative technique.

1. First of all you will need 2 images, 1 for thumbnail and other for large image.

2. Take new file in Dreamweaver and insert your thumbnail in it.

3. Select the thumbnail and run the command Windows >> Behavior or simple press Shift + F4 key.

4. Towards the right side behavior panel would come, click on the  and then select Open Browser Window:

5. Following window should come:

URL to display:

You can either type the URL of any website (i.e. http:www.stunningmesh.com) or you can select any file from here, like we have Large Image file, so click Browse button and select your Large View file.

Window Width:

Here you can write the width of Popup window. As our large image is having width of 600 so I’m going to write 600 here.

Window Height:

Here we will write the height of our large image. So I’m writing 400 here.

Navigation Toolbar:

If you switch on this option then in Browser when Popup window will come you will also see Navigation bar of browsers on top. If you don’t need this just remain this option uncheck.

Menu Bar:

If you switch on this option then in popup window you will also see Main Menu bar. (i.e. File Edit View History etc.) If you don’t need then just uncheck this option.

Location Toolbar:

If you have unchecked Navigation Toolbar and you also want to see the bar where file location would come, so after checking this option you will also see that location toolbar in popup window.

Scrollbars as Needed:

Suppose you are watching a website in Popup window and that website is having a very long page, if you have not switched on this option then you will not see Scroll bars around that popup window, you may switch on this option to view those scrollbars too.

Status Bar:

Bottom last bar of browser window will come if you switch on this option.

Resize Handles:

If you switched off this option then you will not be able to change the size of Popup window, switch it on if you need to resize it.

Window Name:

This is important to give the name of window. Suppose you have more than one thumbnails and you want to open each thumbnail in a popup window, if you have written same Window name for all thumbnails then only on popup window will open, but if each thumbnail is having different Window name, then each thumbnail’s popup window will open in new Window (Better to use same name for all windows, to avoid the load of windows)

6. Hit OK and save the file. In Browser Window (right panel) you will see the Mouse Behavior, you can change it by selecting anyone of your own desire.

Note:

If you are using Adobe CS then you will have to select <A> onClick from this list, otherwise you will not be able to see the Hand Mouse pointer in browser Window. In earlier version of Dreamweaver you don’t have to select anything.

About The Author