iWeb Tip #6 – Pop Up Windows in iWeb
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>
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
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.
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.
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
I was wondering if there is a code to automatically have a pop up box appear when opening my website?
i second that question…
I did some searching around and found this:
http://javascript.internet.com/generators/popup-window.html
Just fill in the information, click generate, copy both parts of the code “HEAD / BODY”, leaving out the instructions in between and paste it into a HTML Snippet in iWeb.
I needed this just to warn viewers that with my iWeb page, Safari was the best for viewing, while Firefox was second, and finally no responsibility for Explorer users.
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.
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.
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!
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
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.
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!!!
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
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
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,
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.
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
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!
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?
Thanks for the tip guys. It will help tremendously in my freelancing career.
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
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
Okay, so here’s a question…. how do you make a roll over image button produce a pop-up window?
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
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
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
Hi, Can I change font and color on the text?
Thanks for the tips!!!