|
There are certain times, while your site visitors cruise around your Web page, that it would be nice to pop open a little window to show certain pages or images, without going to a whole new Webpage. Little popup windows are extremely handy for presenting information while keeping the visitor on the same page. Let's look at some of the neat things we can do with popup windows. To begin with, we're going to use a Javascript href to do what we want. Associated with the "Open" action are three sections or parameters. In the code below, you see the following: window.open('http://www.bravenet.com/reviews/coolscripts/windows/sample.htm','miniwin','toolbar=1,location=0,width=300,height=300') The first part is the webpage URL. The next is the "name" of the window (can be used for targeting). And the last section is any features for the window that will be popped open. This is explained further below. Opening a basic 300x300 window» Open the Window
<a href="javascript:void(0)"
onClick="window.open('http://www.bravenet.com/reviews/coolscripts/windows/sample.htm','miniwin','toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=1,resizable=1,width=300,height=300')">Open a Window
</a>
Opening the window with all features turned off» Open the Window
<a href="javascript:void(0)"
onClick="window.open('http://www.bravenet.com/reviews/coolscripts/windows/sample2.htm','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=300,height=300')">Open A Window
</a>
A List of Window Features ( 0=off , 1=on )» TEST all values set to 1 (on)» TEST toolbar=0 (back, reload, home, etc.) » TEST location=0 (url input field) » TEST directories=0 (favorites) » TEST status=0 (at bottom of page) » TEST menubar=0 (file, edit, view, etc.) » TEST scrollbars=0 (can the person scroll?) » TEST resizable=0 (can the window be stretched) » TEST width=600 (width of window in pixels) » TEST height=400 (height of window in pixels) » TEST all values set to 0 (off) <script for="window" event="onload()">
Adding a "close window button"The close window button is nice to offer the reader. It can be in the form of a button, image, or a text link.» Try The Close Me Window Button link: <form><input type="button" value="Close Window" onClick="window.close()"></form>
Text link: <a href="javascript:window.close()">CLOSE WINDOW</a>
Image link: <a href="javascript:window.close()"><img src="closeme.gif" border="0" alt="[CLOSE ME"></a>
Let the window close on its own.You also have a choice to have the window "auto-close" after a specified amount of time. Add a small piece of code in the body tag and you're set.» Try the `Auto-Close` Window Have the window open when the page loads.Maybe you want to have a popup window open when the main page initially loads...» Try the `Pop-up when Arriving` Window Have the window open when you leave the page.Maybe you want to have a popup window open when the visitor leaves the page...» Try the `Pop-up when Leaving` Window |
