Quick and Dirty JavaScript Pop-Up Windows


Our topic today: JavaScript pop-up windows.

I have a quick and dirty method I usually use to create JavaScript pop-up windows. I use it because it allows the user to still access the page if they have JavaScript turned off and it centers the window on the screen.
The function accepts 3 parameters the URL, window width and window height. Originally I had used it for a photo gallery script I had written where I needed a way to open each photo in a specifically sized window without overloading the page with excessive functions or code.

The JavaScript function looks like this:

<script language="javascript" type="text/javascript">
<!-- Begin Script
function popWin(URL, winWidth, winHeight) {
    var day = new Date();
    var id = day.getTime();
    var winLeft = screen.width/2 - winWidth/2;
    var winTop = screen.height/2 - winHeight/2;

    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=" + winWidth + ",height=" + winHeight + ",left=" + winLeft + ",top=" + winTop + "');");    
    eval("page" + id + ".focus()");
}
// End Script -->
</script>

With links formed like so:

<a href="page_to_open.html" onclick="popWin(this.href, 650, 450); return false;">Open pop-up window</a>

Nothing terribly special but it's a quick-and dirty way to create simply customizable windows in a flash!

Related Links

Information and Links

Join the fray by commenting, tracking what others have to say, or linking to it from your blog.

Information
1 year ago
One Response
Feeds and Links
Comment Feed
More by Terri Ann
Social Bookmarking
Del.icio.us
Digg
Technorati
StumbleUpon
Categories and Tags
Code
Feature
, , , ,

Similar Entries
Extending JavaScript to Trim
As of lately I have become, well, obsessed with the Prototype JavaScript library. There is, as there always is, heated discussions across the internet of the benefits/strengths/weaknesses of many readily-available JavaScript libraries. Such as: Prototype MooTools jQuery Mochikit Dojo Toolkit Yahoo! UI Libray Google Web Toolkit But for the time being, all those libraries are irrelevant. It's great how easy they are
JavaScript Script.aculo.us Fade with a Timer
Using Scriptalicious's fade effect with a simple JavaScript timer you can send a message to your visitor . A great an effective way to increase usability and provide useful feedback after your visitor has made some action. Oh...and it looks good!
JavaScript BMI Calculator
Time for some learnin' & JavaScriptin' One thing I had to do for a client a while back was create a JavaScript body mass index calculator. She just wanted 2 fields: Height (inches) Weight (pounds) On that same page she also had a table displaying the translation of BMI calculations from the CDC Website.
Zip Code, Phone Number and Replacing Empty Fields with Really Easy Validation
While using the Really Easy Validation JavaScript validation library I've accumulated a few custom validations that for US phone numbers, US zip codes, Canadian postal codes as well as replacing empty fields or fields that don't contain a numeric value. Good stuff!
Change Rel External to Target Blank using Prototype
Use javascript to make XHTML valid rel="external" act like target="blank" in a snap using the Prototype JavaScript library.
Next Post
JavaScript BMI Calculator
Previous Post
Chumby is here!!!

Write a Comment

Take a moment to comment and tell us what you think. Some basic HTML is allowed for formatting.

Reader Comments

Gravatar:
Written by:
Amy
Posted:
11 months ago

Great sample to have onhand!

Another thing you can do is have that function return false and then your onclick can just return the function.

Like this:

function popWin(URL, winWidth, winHeight) {
    [...]
    eval("page" + id + ".focus()");
    return false;
}
[...]
<a href="page_to_open.html" onclick="return popWin(this.href, 650, 450);">Open pop-up window</a>