Prototype powered Popup script

posted March 24th 2006 at 2125 EST in 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.


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;
  }
}

 

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


<a href="path/to/page" onclick="return Popup.open({url:this.href});">link title</a>
 

9 Responses

  1. #1 Mike
    3 years, 11 months ago

    Hi just stumbled upon your site, I really like the design. Your popup script seems pretty good as well. It’s been added to the bookmarks!

    I am really impressed with the simple math validation you’re using for this form. A client of mine has been receiving the odd spam email from their contact form, and I’d like to stop it dead in it’s tracks. I’m assuming your method would be basically foolproof, how’s it working out? Is it a custom script or a plugin?

  2. #2 DigitalMaster
    2 years, 9 months ago

    Hi… I realy like your work…I would like some help and advices…my yahoo messenger id is: digitalmaster_1….thanks and looking foreward to hering from you….

  3. #3 Jacob
    2 years, 8 months ago

    Great stuff – cut and pasted the code, and works right off the bat :-)

  4. #4 abrir popup utilizando prototype | Mi mundo para Lelos
    2 years, 6 months ago

    [...] Tras buscar un poco por Google he encontrado un post en un blog (jehiah) con una función que puede generar un popup muy parametrizable utilizando eventos y funcionalidades de Prototype. [...]

  5. #5 Figure Cancellations » Blog Archive » popup with javascript in CakePHP 1.2 and pages controller
    2 years, 5 months ago

    [...] the javascript is a slick script that is accessible and uses prototype: [...]

  6. #6 Kelvin
    2 years, 4 months ago

    Tested, love it!

    I have a question, not sure about what prototype can do!

    How do I pass back some informations from the popup to the parent page using prototype? Can I pass back informations from a tables list from the popup???

    Thanks!

  7. #7 Terri Ann
    1 year, 6 months ago

    Great work! I decided to change your positioning to default to the center of the screen. This is an amazingly useful object.

    if (this.options.top!="")openoptions+=",top="+this.options.top;
else                openoptions+=",top="+parseInt((parseInt(screen.height)/2) - (parseInt(this.options.height)/2));
if (this.options.left!="")openoptions+=",left="+this.options.left;
else                openoptions+=",left="+parseInt((parseInt(screen.width)/2) - (parseInt(this.options.width)/2));
  8. #8 Dan
    11 months, 1 week ago

    Great job! Thanks for this, saved me some time!

  9. #9 Tarkin
    5 months, 3 weeks ago

    The ‘normal’ option appears flawed to me – on K-Meleon 1.5.3 and Firefox 3.5, the ‘normal’ options were always being set!

    I think it’s because the this.options.normal object exists, and therefore always returns true. I tried with three workarounds:
    a) undefining the ‘normal’ object
    b) commenting the normal setters
    c) changing the test to:
    if (this.options.normal == true)

    I wanted undecorated popups =)