moopop: "unobtrusive" popups with mootools
August 12th, 2007I 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
August 12th, 2007 at 10:38 pm
*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.
August 12th, 2007 at 10:51 pm
remember that this is for *user requested* popups and not for spammy auto-triggered ads purposes.
August 17th, 2007 at 12:11 am
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.
August 17th, 2007 at 12:55 am
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 ^_^
October 22nd, 2007 at 4:48 pm
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
October 22nd, 2007 at 4:56 pm
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!
February 8th, 2008 at 6:38 am
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
February 16th, 2008 at 4:33 pm
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. ;)
February 16th, 2008 at 6:18 pm
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.
June 12th, 2008 at 5:37 am
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]
June 13th, 2008 at 7:02 am
Any chance of an update of moopop to work with mootools 1.2?
June 14th, 2008 at 1:50 pm
@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 :(
June 23rd, 2008 at 12:55 pm
I'm waiting to get this for mootools 1.2 – any update yet?
June 23rd, 2008 at 11:39 pm
yes, sure:
http://blog.gonchuki.com/archives/updating-moopop-for-mootools-12/
July 14th, 2008 at 1:37 am
[...] y al pié; extensión para Mootools que nos permite poner un simple [...]
December 17th, 2008 at 9:24 am
Nice plug, but scrollbars doesn't work ^^