moopop: "unobtrusive" popups with mootools

August 12th, 2007

I know, it's quite ironic to call unobtrusive a popup window. However there are times when clients, coworkers or maintainers demand for a "simple" popup window solution. It's for that cases that I built moopop some months ago and I'm now sharing the code.

Important:

The code and samples in this page are aimed towards mootools 1.11.
If you are using mootools 1.2 please use the new version

the call for a simple solution

What's more annoying than a popup window? Writing code to execute them.
- "Was it with quotes or without them?"
- "Should I write px to specify it's in pixels?"
These questions and more always raise in the seldom event that we need to write some kind of code for a popup window. Even worse, we feel it's a waste of time to write spiffy code to manage the popups since we are coding an ugly feature.
Fear not, as I created a simple yet elegant solution based on the mootools framework (In fact, the solution is pretty much library-agnostic, changing 2-3 lines of code is all you need to adapt it.)

how simple can it be?

As simple as adding the JS to your site and adding a rel attribute to your links.

1
<a href="http://www.google.com" rel="popup">popup google</a>

see it in action
rel="popup" will trigger the standard popup behavior that is to open the link in a new window, pretty much works as a target="_blank" while keeping our code tidy, standards based and semantically meaningful.

what about arbitrarily sized windows?

Thanks for asking. That's where moopop shines as you can have a ton of different sized popups in your page while still having to write no javascript code. This is where site maintainers start to love you, as they can edit or add new content without having to learn the intricacies of javascript.
Let's see the code:

1
<a href="http://www.google.com" rel="popup[600,400]">popup google at 600x400</a>

see it in action
as simple as that, we can personalize each popup window by adding the size between square brackets.

documentation, requirements and download

Documentation is built-in on the JS file in case you want to take a peek in a mootools-esque style for easier understanding.
There are more possible uses for this such as setting a default size for all the popups without a given size, but I will leave that to you as that's a silly feature I had to build for a lazy coworker.

If you are already using mootools it's pretty much sure that you have the required dependencies. If not, it requires Element.Selectors, Window.DomReady and the rest of the requirements are automatically selected by the mootools download builder

- Download moopop with documentation
or
- Download JSMin stripped version

License: Creative Commons Attribution-Share Alike 3.0


16 Responses to “moopop: "unobtrusive" popups with mootools”

  1. mind says:

    *cough*. no, writing code for a popup is not more annoying than the popup itself, because when a random window pops up, that's annoying, and the code that made it do that was written by some worthless monkey, not me.

  2. gonchuki says:

    remember that this is for *user requested* popups and not for spammy auto-triggered ads purposes.

  3. Webmaster Mexico says:

    Sería bueno si pudieras ponernos que más podemos hacer con mootols con ejempos como este, voya comenzar a usar estas popup me ahorran mucho tiempo. Gracias, buen tip.

  4. gonchuki says:

    la idea es seguir sacando mas artículos con cosas que he hecho o he tenido planeado hacer y no llegué a concretar. mootools es mi librería de cabecera así que tranquilo que seguirán saliendo artículos sobre esto ;)

    y entre tanto, mantengamos el inglés en el blog ^_^

  5. FLaX says:

    Does this have to be a HTTP address IE. http:www.google.com as opposed to a local script /views/popup.html??

    this is not seeming to work. Any thoughts…?

    details:
    mootools1.11.js

  6. FLaX says:

    strange. I figured out the problem, in my javascript declaration I had this:

    instead of this:

    and it didn't work, but using the web developer tools in FF it recognized all my scripts, including moopop! Strange… Anyway cheers! thanks for sharing the script!

  7. Daniel says:

    Hi, thanx for this class as I like to use it for my project!

    Just a little improvement from me:

    I wanted to use popups for a gallery, so I like to give it a name to open all those links in this popup. Therefor I changed it to:

    popup: function(el) {
    window.open(el.href, el.name || ", el.getAttribute('popupprops') || ");
    }

    Thanx again,
    Daniel

  8. Scott L says:

    Added some lines for positioning:

    //at the top
    width: 0,
    height: 0,
    top: 70,
    left: 160,

    //towards bottom
    if (size[1]) el.setAttribute('popupprops', 'width=' + size[1] + ', height=' + size[2] + ', top=' + this.top + ', left=' + this.left );

    We could probably set this in the rel tag too but that may be too cumbersome. Would be nice to have a "get user screen width" function and have the window centered based on that. ;)

  9. gonchuki says:

    In fact I was thinking about rewriting some bits for mootools 1.2 but that will have to wait until we get the final release as most people is still using 1.11 for production.

  10. Matijs says:

    Added some centering to the popup:

    [code]
    add_pop_to: function(el) {
    el.addEvent('click', function(e){ new Event(e).stop(); this.popup(el); }.bind(this));

    var size = el.getAttribute('rel').match(/\[(\d+),\s*(\d+)\]/) || ['', this.width, this.height];

    if (size[1]) {
    /*
    added centering of the popup window
    */
    var left = (screen.width - size[1]) / 2;
    var top = (screen.height - size[2]) / 2;
    el.setAttribute('popupprops', 'width=' + size[1] + ', height=' + size[2] + ', left=' + left + ', top=' + top);
    }
    },
    [/code]

  11. Matt says:

    Any chance of an update of moopop to work with mootools 1.2?

  12. gonchuki says:

    @Matt:
    I have 1.2 code fully working and deployed in a production site, I just need a couple hours to update this post with the code :) that means… *when* I have those couple of hours :(

  13. Greg Smith says:

    I'm waiting to get this for mootools 1.2 – any update yet?

  14. gonchuki says:

    yes, sure:
    http://blog.gonchuki.com/archives/updating-moopop-for-mootools-12/

  15. Pablo Fabregat » Moopop, ventanas emergentes en un paso says:

    [...] y al pié; extensión para Mootools que nos permite poner un simple [...]

  16. RayDeeA says:

    Nice plug, but scrollbars doesn't work ^^

Leave a Comment