Online Payday Loan Online Payday Loan

Follow me on Twitter

Sized Pop-Up Windows with JavaScript


November 23, 2010

Creating sized pop-up windows is something I have found very helpful in creating several of my own web sites, so I thought I would write up a quick entry on how to make them yourself using JavaScript.

So we start out with a simple web page with a thumbnail image and some text just to set the scene. In this example I’m simply going to add a JavaScript command to the thumbnail in order to open the full sized image in a new window fit to it’s dimensions. so here is my example web page:

Now to add the JavaScript calling the pop-up window from the thumbnail, you will need to add code in two different places. First, you will need to go into the page code and right below the <title> and <link> (if you’re linking to a style sheet) tags, and add a <script> tag as you can see below in lines 7-13:

Next you will need to find the thumbnail (or whatever element you want to call up a pop-up window) and add an onclick command inside the <img> tag as you can see on lines 19-20 below.

The onclick=”MM_openBrWindow( section will always be the same, however where you see ‘mario.html’ in this example, you will place the web page which you have created with the full-sized image on, or you can simply put the file path to the image itself i.e. ‘resources/Pop-Ups/assets/mario.jpg’ but I usually prefer to place the content of the pop-up inside of a new page so I can have more control over the design and layout. In addition, where you see the height and width values which control the actual size of the pop-up window, you will have to open the web page in a browser and open the pop-up page until you have played around with the values to fit the pop-up content into the window itself. You can click HERE to view my sample page including the pop-up window on the thumbnail.

The last thing I will say about this is that if you decide to put your pop-up content in a new web page, place it inside of a <div> and add an ID or class, and then in your CSS set the “position” to either absolute or fixed (position: absolute; or position: fixed;) and it will cause the <div> container to automatically shrink to the widest element inside of it.

{ Posted in web design | No Comments »}

LEAVE A COMMENT.

No Comments »

RSS feed for comments on this post. TrackBack URL

Leave a comment