Jul 01

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("https://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:

https://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('https://www.iwebunlimited.com', 'Open Link', 'height=640, width=500, scrollbars=no')"><img src="https://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('https://www.iwebunlimited.com/examples/popup.html', 'Open Link', 'height=600, width=500, scrollbars=no')">View Pop-up Window</a>

28 Responses to “iWeb Tip #6 – Pop Up Windows in iWeb”

  1. leo says:

    hi,
    great job! everything on this site is so useful!
    i just have one question.
    when you use text to link to a popup is there a way for the text not to be underlined?
    thanks

  2. Tracy says:

    Hi. Thanks for this tip. I am trying to use this for a site that I maintain for a friend. I can not get the scrollbars to appear and the bottom of the page is not viewable.

    Any thoughts? http://www.renegadeathletics.net
    It’s near the bottom of the page. Thanks.

    • Tracy says:

      This is the HTML that I am using:

      function open_win()
      {
      window.open(“http://www.gymnastmall.com/Renegade_Athletics.html”, “_blank”, “toolbar=yes,  location=yes,  directories=yes,  status=yes,  menubar=yes,  scrollbars=yes,  resizable=yes, copyhistory=yes, width=900, height=2000”) }

      I am using iFrames to keep the slideshow in the banner running. I don’t know if that has any bearing on my issue. Thanks again.

  3. Maximin lida says:

    Hello,
    Everything look great unfortunately after more than one week trying to make fansy zoom work that did not happen, oh well the only code that work wil be the first one not to use with image

    too bad wanted to do some update but will have to find another way

    thank you, nice try

  4. Joel Donis says:

    I was wondering if there is a code to automatically have a pop up box appear when opening my website?

  5. spatio says:

    Hi. Thanks for this tip. But I can’t get it to work properly.
    I opted for my own buttons, which appear when I have published to my folder but the window that comes up, although with the specified attributes of size, etc., and with the text content of the window page, is missing the formatting and images.

    When I publish to my host, the buttons don’t show, and the pop up does not have my content, just the default host message.

    I’ve spent hours jiggling around with this and tweaking that without success. I like iWeb very much but lament the dearth of built in features. I write this in the hope that perhaps you can suggest something I haven’t tried that’s obvious to you.
    I need this feature. Thanks.

  6. Hi I was wondering if it is possible to make the pop up automatically pop up when people go to my home page? Please let me know. Thank you.

  7. J says:

    As everyone has mentioned, Great Site! I’m using my own images as the button. The pop-up window works but needs to be manually resized by viewer to see entire image. It’s not opening to the size i’m entering in the code. Any ideas? I used the “button” snippet and placed it over my image button just to see if that would open a window to the right size. That worked. No manual resizing needed but obviously looks messy as I would have a partial button obstructing an image. Thanks!

  8. Sacha says:

    I’ve found a problem on your codes that will cause problem on Internet Explorer users …

    When I use my own image and your code:

    I have an error down the IE screen (yellow warning triangle with “error on page”). When double click on it I receive this message:
    UNKNOWN ARGUMENT: WIDGET1_MARKUP.HTML

    After a long search and tests I’ve replaced in your code
    argument
    ‘Open Link’
    with
    ‘linkname’

    and now it works perfect …
    Eventually, if anyone have same problem, test this solution.

    thanks for your amazing site …

    Sacha from Switzerland

  9. Robbie says:

    Hi, really liked this tip and your whole site. The snippet works like a charm. I wanted to know if there was a way to change the “button” LOOK that does the “pop-up”?

    The look of the button is inconsistent with the site I build for my church. I covered it with a coming box so as to not expose the button till the page is ready.

    I did a small donation in thanks for your tip.

  10. eurogirl1202 says:

    UGH ~ so i can’t figure the text part out. where do i paste the text above? instead of the text i want linked? in the hyperlink box? is it a combination of that and the button?

    i need help!!!

  11. imazer says:

    Thank you so much for the tips!

    One question: in all the techniques for pop-ups you’ve shown, is there a way to enable resizing by the user? So far all the pop-up are static images whose surrounding windows may be changed.

    Thanks!

    –imazer

  12. imazer says:

    Oh, and to follow up, I mean is there a way within the pop-up window to resize, without using the standard keyboard window-size controls. I’ve seen some pop-ups where the curser was a plus or minus sign and the mouse click shifted the size.

    Thanks again.

    –imazer

  13. tim says:

    The code works great for all above, I’d like to know if it is possible to change the highlight color if it is a button or the text colors if using text only?

    I was also wondering how to add a close window X within the pop-up if possible?

    Thanks,

  14. Joey says:

    wondering where to add what code that will allow pop-up to open on top all other windows. I found that multiple links will open in back of main window if they are left open.

  15. Jayson says:

    It worked well. I used image to be clicked and pop-up window appeared as well. But it does not Pop-up when checked with Internet Explorer. Works well with Firefox…Any idea why???

    cfctrust.com/Site/Audio.html

  16. Gargi says:

    Hey guys,
    Thanks much for these simple steps to really unleashing the potential of iWeb.

    Do you have a “tip” on understanding the Site (created in iWeb) directory structure?
    For my site, I had to re-edit some links when it went online… while it worked like a charm on the local server!

  17. Freek says:

    Hello,

    I want to have a pop-up window that show just text. Not a link or website.
    I have a Concert agenda on the site. And I want to put more information on it.

    Is it possible to have (for example) a date. When people click on it. A window pops-up with information about the location and time etc.

    Any Ideas?

  18. Thanks for the tip guys. It will help tremendously in my freelancing career.

  19. jamie says:

    hello….this tip was very helpful for me…the only question i have is….i do not have a mobile me account, and i was wondering how i should alter the script so i can still have my pop up window….any help with this would be much appreciated……

    thank you

    jamie

  20. Ady says:

    I understand most of the above but how do a pop or window when I use iWeb in a local folder. I use iWeb as a neat reference guide at work as we do nt have any form of Internet access.

    On a separate note is there anyway to create a guest/comment page solely for offline use?

    Many thanks

    Ady

  21. Kyle says:

    Okay, so here’s a question…. how do you make a roll over image button produce a pop-up window?

  22. Robster says:

    I have just found this solution and it works very nicely, thanks. One question, how do I make the pop up centered in the browser (on any user’s screen).

    Thanks

  23. dre says:

    What do I need to do for the po-up window to come up in the middle of the screen as opposed to the top left corner?
    please help

  24. Marty says:

    Hi, I for the life of me can’t get the second part of the pop up to work…….on the demo you have another snippet to close the window as opposed to the X but I can’t make it work…can some one tell mw what im doing wrong…
    does the snippet get posted on the open pop up……….just cant get it working….
    thanks

  25. Ana says:

    Hi, Can I change font and color on the text?
    Thanks for the tips!!!

Leave a Reply