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.