iWeb Tip #6 – Pop Up Windows in iWeb

28
8856

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 comments

  1. leo 6 March, 2010 at 17:10 Reply

    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

    • Tracy 25 March, 2010 at 14:08 Reply

      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.

  2. Maximin lida 26 March, 2010 at 17:26 Reply

    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

  3. spatio 3 April, 2010 at 03:26 Reply

    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.

  4. J 13 April, 2010 at 06:05 Reply

    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!

  5. Sacha 14 April, 2010 at 02:02 Reply

    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

  6. Robbie 16 July, 2010 at 09:57 Reply

    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.

  7. eurogirl1202 6 September, 2010 at 09:30 Reply

    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!!!

  8. imazer 8 November, 2010 at 10:32 Reply

    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

  9. imazer 8 November, 2010 at 10:43 Reply

    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

  10. tim 8 November, 2010 at 12:02 Reply

    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,

  11. Joey 28 November, 2010 at 17:10 Reply

    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.

  12. Jayson 7 August, 2011 at 07:57 Reply

    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

  13. Gargi 7 September, 2011 at 07:21 Reply

    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!

  14. Freek 7 November, 2011 at 02:40 Reply

    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?

  15. jamie 31 March, 2012 at 16:03 Reply

    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

  16. Ady 23 April, 2012 at 15:30 Reply

    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

  17. Robster 10 September, 2012 at 04:34 Reply

    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

  18. dre 7 October, 2012 at 21:43 Reply

    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

  19. Marty 13 January, 2013 at 06:54 Reply

    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

Leave a Reply to Ady Cancel reply

Facebook
Twitter
YouTube