Prototype powered Popup script

by @jehiah on 2006-03-24 21:25
Filed under: All, Javascript, Web

Jonathan Snook had a great post on a prototype powered popup script. This is just a followup to that with a complete script.

A few things to note. Along with all the standard options you expect with window.open, i add a normal option which opens up a new browser window vs a popup window. I also make sure the width and height are realistic for a users screen size.

[js]
var Popup = {
  open: function(options)
  {
    this.options = {
      url: '#',
      width: 600,
      height: 500,
      name:"_blank",
      location:"no",
      menubar:"no",
      toolbar:"no",
      status:"yes",
      scrollbars:"yes",
      resizable:"yes",
      left:"",
      top:"",
      normal:false
    }
    Object.extend(this.options, options || {});

    if (this.options.normal){
    this.options.menubar = "yes";
    this.options.status = "yes";
    this.options.toolbar = "yes";
    this.options.location = "yes";
    }

    this.options.width = this.options.width < screen.availWidth?this.options.width:screen.availWidth;
    this.options.height=this.options.height < screen.availHeight?this.options.height:screen.availHeight;
    var openoptions = 'width='+this.options.width+',height='+this.options.height+',location='+this.options.location+',menubar='+this.options.menubar+',toolbar='+this.options.toolbar+',scrollbars='+this.options.scrollbars+',resizable='+this.options.resizable+',status='+this.options.status
    if (this.options.top!="")openoptions+=",top="+this.options.top;
    if (this.options.left!="")openoptions+=",left="+this.options.left;
    window.open(this.options.url, this.options.name,openoptions );
    return false;
  }
}

[/js]

This leaves my page with the following beautiful code based on the practices I outlined in my post titled How to open popups. It degrades nicely and allows users to right-click to open in new window if they wish.

[html]
<a href="path/to/page" onclick="return Popup.open({url:this.href});">link title</a>
[/html]
Subscribe via RSS ı Email
© 2014 - Jehiah Czebotar