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.
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.
<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?
Let's see the code:
<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