Pop Up Windows in iWeb

Opening certain small windows on a page can be very helpful and convenient. As long as the content of your pop-up window is relative to your site, visitors don’t mind the pop-ups, it’s when it’s for something unrelated to your site, like an “ad” of some sort, that visitors don’t like them.

See Demo

Step 1:
Create a new page page in iWeb that you want to be your pop-up window. Usually it’s smaller so you might want to make your page size something like 400-500 width and 600 height. You can change the sizes in the Page Inspector under Layout (take into account your headers and footers).

Step 2:
Finish your design of how you’d like your pop-up to look and jump to the page where you want to button for the pop-up to be. Get an HTML Snippet and paste this code into it.

<script type="text/javascript">
function open_win()
{
window.open("http://web.mac.com/username/sitename/pagename.html", "_blank", "toolbar=no,  location=no,  directories=no,  status=no,  menubar=no,  scrollbars=no,  resizable=no, copyhistory=yes, width=490, height=600") }
</script>
<form>
<input type="button" value="View Pop-up Window" onclick="open_win()"> </form>

Step 3:
Change the items in RED and hit apply.

You need to be sure that the URL is the exact location of your pop-up. If your pop-up is within a blog, or a My Albums page there might be a few more folders you’ll have to type in for example:

http://web.me.com/username/sitename/myalbumpagename/pagename.html

From there just decide if you want scrollbars, and other things that say “no”, just change to “yes” if you want them. Also change the red text at the bottom of the code to be what you want the button to read.

Step 4:
Publish and your set. Be sure to try it out before inviting anyone to view your site.

Good luck with it and have fun.

To use your own images:
If you’d rather have your own image for the button, put your button graphic (jpg, png, gif, etc) on your server somewhere and use this code:

<A HREF="javascript:void(0)"onclick="window.open('http://www.iwebunlimited.com', 'Open Link', 'height=640, width=500, scrollbars=no')"><img src="http://www.yoursite.com/imagefolder/yourbutton.png"style="border:none;" ></a>

To Use Text:
If you’d rather use text instead of a form button or your own button use this code:

<A HREF="javascript:void(0)"onclick="window.open('http://www.iwebunlimited.com/examples/popup.html', 'Open Link', 'height=600, width=500, scrollbars=no')">View Pop-up Window</a>