|
Title: Javascript for Creating Non-Resizeable Popup Window Post by: Daniel Franklin on September 29, 2007, 11:09:09 AM Ever wonder how websites implement those little non-resizeable windows that pop up when you click on a link? Below is the code and a brief instruction set on how to add this feature to your website. This article assumes you have some knowledge about HTML and Javascript. Keep in mind that this is not the same thing as those unsolicited popus you see in some sites. This is user induced when a link is clicked. Different, but can have the same negative connotations, so use them sparingly.
Step One - Create the web page that will be posted to the small window. No need to center tables and headings, etc. Set the page like you want it and the save the file. Step Two - Open a text editor of your choice and enter the following code: function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=150,height=150,scrollbars=no'); return false; } Once this code is in your text editor, save the file with a descriptive name and ".js" extension. If the editor adds the .txt, just rename the file and remove the .txt extension. This code is what controls the popup and its size. Notice the width and height atributes. You can change those to make your window the size you like. Step Three - Create the link that will pop up your window. An example link is listed below: For the purpose of this article, I had to remove the leading and ending a href tags. Be sure to add them in order to make the link work. a href="your page name.htm" target="_blank" onClick="return popup(this, 'notes')">Your Link Text Here Replace the "your page name.htm" with the name of the page you created in step one. As for the word "popup", it should match the name of the function that you created. So if you saved the code above and changed the function name to something other than popup, you need to change the name in the link too, otherwise, your code will not work. Step Four - Add the path to the .js file that contains the popup funtion between the "<head>" tags of the page where your link will be stored. An example is listed below: <script type="text/javascript" language="javascript1.2" src="scripts/popup.js"></script> Notice that the name "popup.js" is also the name of the file where the function popup resides. In order for your script to work, you must make sure the path to the ".js" file is correctly listed in the src property of the <script> tag. Final Thoughts - Once you have these three elements in place, you can begin testing your pop up and re-size the window as needed. Not too much work and you now have a new technology implemented in your web page. Interested in other articles or questions about this one? You can contact me via my wife's website at www.threebsinsanity.com to request more info. Articles Source - Free Articles |