Mootools can be succesfully used to access non-existing properties and tags in your HTML document.

Sometimes there is not enough regular properties or attributes for some HTML tag, but you need to place your data into it. So you can made it up for yourself, like for example:

<option url="gmail.com" replace="google.com"></option>,

even if option tag doesn’t suport properties url and replace. Mootools access is allways the same,

option.getProperty('url').

You can also use some non existing HTML tag, like

<nothing else="matters"/>.

The mootools has no problem with it, for example:

alert($$('nothing')[0].getProperty('else')); 

works like magic.

You can also create non-existing tags, like:

var n = new Element('nothing');
document.body.grab(n);
$$('nothing').setProperty('else','matters');

Have fun!

I had to made a mootools class for popups, because I deal with this sort of “disturbing features” almost every day at work. I don’t know why all customers want to have popup windows on their websites. But they do.

The concept is very similar to lightbox behaviour. There’s a black div that covers the whole screen and smaller white div in the center of the screen. The white div holds inner container and close button. You can put anything into inner div, for example HTML code, JPEG image, swf file or YouTube object.

The divs are created in the class’s constructor. The content is filled every time by calling the open function. You need MooTools and then you can create the object like this:

window.addEvent('domready',function(){
	new popIt({
		bgColor: 'black',
		bgOpacity: 0.5,
		width: 640,
		height: 385,
		fgColor: '#EBF6F8',
		fgLoader: 'loading.gif',
		trigger: 'pop_up_trigger',
		closing: 'close.png',
		insert: '<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/hOLAGYmUQV0?fs=1&amp;hl=sl_SI"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/hOLAGYmUQV0?fs=1&amp;hl=sl_SI" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385" wmode="transparent"></embed></object>'
	});
})

You can set the color of background div and its opacity, then you can set the color of smaller div in the middle and the loader image if you have one. You can also add a closing image, but it’s not necessary. By using the insert property you can insert into inner div any HTML you want. You can also use property inject, where you just define the ID of some HTML element, which is coppied into the inner div.

See the example here.