updating moopop for mootools 1.2

June 23rd, 2008

After several requests to update the script, I finally had time to make the update. In fact the script was under production for more than a month running over mootools SVN builds. The update also comes with a couple additions suggested by users, and also some optimizations thanks to the new mootools 1.2 element storage.

so… what's new?

the basic improvement is that the code now works with mootools 1.2, be warned that this actually *breaks* compatibility with mootools 1.11 so please use the older version if you haven't yet gone to 1.2

and then, what else?
resizable windows
I got some requests for this feature, so it's here. Just mix a "r" parameter in this format: "[600,400,r]" and the popup window generated will be resizable.

ability to reuse the same popup
the old moopop had a bad habit of creating a new popup window for each link and not offering an option to reuse the same window. now you can use the "name" attribute native to <a> tags to specify the target of the popup.

defaulting to rel="popup"
now you can just call moopop.captureByRel() without arguments and the script will default to the most common use case.

under the hood…
optimized code a bit, and now it's using both element storage to avoid memory leaks and cleaner CSS2 selectors that got native in mootools 1.2


yes sure, unless for the additions specified in this post, all documentation remains the same and you can get it either in the original post, or looking at the source of the uncompressed moopop 1.1


as with previous version, you just need Selectors and DomReady from the mootools core builder and the rest of the dependencies are automatically selected.

Download moopop 1.1 with documentation
Download minified version without docs to save bandwidth.

License: Creative Commons Attribution-Share Alike 3.0

11 Responses to “updating moopop for mootools 1.2”

  1. Greg Smith says:

    thanks very much for this

  2. links for 2008-06-25 | iKeif says:

    [...] updating moopop for mootools 1.2 | a pint of javascript (and general web stuff) Okay – this isn't exactly groundbreaking, but when you know you've got to do it, or have someone update them, why not make popups easy? (tags: mootools webdev popup _blank code dev example) [...]

  3. Simon says:


    Great script

    I want the scipt to function on all my links. Is there any way I can achieve this without writing rel="popup" in every a href?

  4. Al says:

    changing the popup function to include adding focus to the popup was very useful for me, you should think about including it:

    popup: function(el) {
    var w = window.open(el.get('href'), el.get('name') || ", el.retrieve('popupprops') || ");
    if (window.focus)

  5. gonchuki says:

    the popup window should automatically get focus when opened if you don't click something else, and in case you did take focus away by clicking something then that was the decision of the user and we as UI designers should not impose the window on their noses.

  6. Vincent says:

    Thanks for this script. I was wondering about something: is it possible to check if a popup is already open? I have a popup on a site that I want to open just once. It is opened like this:

    window.addEvent('domready', function(){

    If the popup is already open, I don't want to allow the user to open it again. Also, if the user goes to another page I don't want it to open if it is already open.

  7. RayDeeA says:

    To make scrollbars work with rel="popup[800,700,r]"
    if (size[1]) el.store('popupprops', 'width=' + size[1] + ', height=' + size[2] + (resizable[1] ? ', scrollbars=yes, resizable=yes' : ', scrollbars=yes') );

    if (size[1]) el.store('popupprops', 'width=' + size[1] + ', height=' + size[2] + (resizable ? ', scrollbars=yes, resizable=yes' : ', scrollbars=yes') );


  8. Danny Foo says:

    Just wanted to share I tried implementing this today – didn't work. Got the core builder files from MooTools and when I had all in place, I get the JS errors:
    Hash.each is not a function
    window.addEvent is not a function

    I'm a website designer and not a developer so it's difficult to troubleshoot this on my own.

  9. gonchuki says:

    You must be doing something wrong, like possibly mixing mootools with another framework that extends native objects (Prototype for example), as both "each" and "addEvent" are mootools functions and have nothing to do with my plugin.
    Keep in mind that this kind of mixing is not supported by neither mootools nor prototype (or anything you could be using that also implements those or other methods) as those frameworks are designed to be the only ones present in your page using native object extension.

  10. Gavin says:

    I had the same problem as Danny. If I used moopop_mini.js it didn't do anything, but if I then went to moopop.js it worked.

  11. DrummerHead says:

    Hello gonchuki!

    I am DrummerHead, and I am also Uruguayan :) I'm a Graphic designer who's been learning mootools and javascript to implement it in my current proyect, and this extension you've made right here really helped. Simple and straight to the point.

    Good work.

Leave a Comment