Moodal Window for MooTools 1.2.3.1

Sep 24

This is my first attempt at publishing one of my scripts, and my first real attempt at writing a MooTools class.

I hope you enjoy it, and check out the demo:
Demo – I plan on replacing this with an inline demo some time very soon.

Here are the image files you will need (I suggest you find something better, these were just temp images for me).

Close:
Resize: 
Loading:

First the Javascript (I’m assuming you’ve got MooTools Code and More installed)

var MoodalWindow = new Class({

	Implements: [Options, Events],

	options : {
		container		: window,
		height			: 700,
		width			: 600,
		overlayColor		: '#000000',
		overlayTransparency	: 0.7,
		overlayClose		: true,
		move			: true,
		resize			: true,
		url			: '',
		title			: 'Modal Window'
	},

	/*
	Constructor: initialize
		Constructor

		Add event on formular and perform some stuff, you now, like settings, ...
	*/
	initialize : function( element, options ) {
		if( $(element) )
		{
			if( $(element).get('title') )
				this.options.title	= $(element).get('title');
			else if( $(element).get('text') )
				this.options.title	= $(element).get('text');

			if( $(element).get('href') )
				this.options.url	= $(element).get('href');

			this.setOptions(options);

			$(element).addEvent('click', this.createPopup.bind(this) );
			return false;
		}
	},

	createPopup : function(){
		this.killStraglers();

		this.createOverlay();
		this.createWindow();
		if( this.options.title ){
			this.createTitle();
			this.createCloser();
		}
		this.createContent();
		if( this.options.resize )
			this.createResizer();
		return false;
	},

	createOverlay : function(){
		var overlayColor		= this.options.overlayColor;
		var overlayTransparency		= this.options.overlayTransparency;
		modalOverlay = new Element( 'div', { 'id':'modalOverlay' } ).setStyles({
			backgroundColor	: this.options.overlayColor,
			position	: 'absolute',
			left		: 0,
			top		: 0,
			height		: window.getScrollSize().y,
			width		: window.getScrollSize().x,
			zIndex		: 99
		});

		if( this.options.overlayClose )
			modalOverlay.addEvent('click', this.closePopup.bind(this) );

		modalOverlay.fade('hide');

		$(document.body).grab( modalOverlay );
		modalOverlay.fade( this.options.overlayTransparency );

		window.addEvent('resize',function(){
			modalOverlay.setStyles({
				height	: window.getScrollSize().y,
				width	: window.getScrollSize().x
			});

		});

	},

	createWindow : function(){

		var modalWindowTop = ( ( this.options.container.getSize().y / 2 ) - ( this.options.height / 2 ) + window.pageYOffset );
		if( modalWindowTop &amp;amp;lt; 0 )
			var modalWindowTop = 0;

		var modalWindowLeft = ( ( this.options.container.getSize().x / 2 ) - ( this.options.width / 2 ) + window.pageXOffset );
		if( modalWindowLeft &amp;amp;lt; 0 )
			var modalWindowLeft = 0;

		modalWindow = new Element( 'div', { 'id':'modalWindow' } ).setStyles({
			position	: 'absolute',
			top		: modalWindowTop,
			left		: modalWindowLeft,
			height		: this.options.height,
			width		: this.options.width,
			zIndex		: 100
		});

		modalWindow.fade('hide');
		$(document.body).grab( modalWindow );
		modalWindow.fade( 'in' );

		if( !this.options.move )
		{
			var reposition = function(){

				var modalWindowTop = ( ( this.options.container.getSize().y / 2 ) - ( this.options.height / 2 ) + window.pageYOffset );
				if( modalWindowTop &amp;amp;lt; 0 )
					var modalWindowTop = 0;
				if( modalWindowTop &amp;amp;gt; this.options.container.getSize().y )
					var modalWindowTop = this.options.container.getSize().y;

				var modalWindowLeft = ( ( this.options.container.getSize().x / 2 ) - ( this.options.width / 2 ) + window.pageXOffset );
				if( modalWindowLeft &amp;amp;lt; 0 )
					var modalWindowLeft = 0;
				if( modalWindowLeft &amp;amp;gt; this.options.container.getSize().x )
					var modalWindowLeft = this.options.container.getSize().x;

				modalWindow.setStyles({
					top	: modalWindowTop
					//left	: modalWindowLeft
				});

			}

			window.addEvents({
				'resize' : reposition.bind(this),
				'scroll' : reposition.bind(this)
			});
		}

	},

	createTitle : function(){

		modalTitle = new Element( 'div', { 'id':'modalTitle' } ).setStyles({
			position	: 'absolute',
			top		: 0,
			left		: 0,
			width		: '100%'
		});
		modalTitle.set( 'text', this.options.title );
		modalWindow.grab( modalTitle );

		if( this.options.move )
		{
			modalWindow.makeDraggable({
				handle : modalTitle,
				limit: {
					x : [ 0, ( this.options.container.getScrollSize().x ) ],
					y : [ 0, ( this.options.container.getScrollSize().y ) ]
				}
			});
			modalTitle.setStyles({
				cursor	: 'move'
			});
		};

	},

	createContent : function(){

		modalContent = new Element( 'div', { 'id':'modalContent' } ).setStyles({
			position	: 'absolute',
			top		: ( this.options.title ? modalTitle.getStyle('height') : 0 ),
			overflow	: 'auto',
			left		: 0,
			height		: ( this.options.height - ( this.options.title ? modalTitle.getStyle('height').toInt() : 0 ) )+'px',
			width		: '100%'
		});
		modalContent.set( 'html', '&amp;amp;lt;br /&amp;amp;gt;&amp;amp;lt;br /&amp;amp;gt;&amp;amp;lt;center&amp;amp;gt;&amp;amp;lt;img alt=&amp;amp;quot;Loading..&amp;amp;quot; src=&amp;amp;quot;images/ajax-loader.gif&amp;amp;quot;/&amp;amp;gt;&amp;amp;lt;br /&amp;amp;gt;Loading Content...&amp;amp;lt;/center&amp;amp;gt;' );

		modalWindow.grab( modalContent );

		modalContent.load( this.options.url );

	},

	createCloser : function(){

		modalCloser = new Element( 'div', { 'id':'modalClose' } ).setStyles({
			cursor		: 'pointer',
			position	: 'absolute',
			top		: 0,
			right		: 0
		});
		modalTitle.grab( modalCloser );
		modalCloser.addEvent('click', this.closePopup.bind(this) );

	},

	createResizer : function(){

		modalResizer = new Element( 'div', { 'id':'modalResize' } ).setStyles({
			cursor		: 'pointer',
			position	: 'absolute',
			bottom		: 0,
			right		: 0
		});
		modalWindow.grab( modalResizer );

		modalWindow.makeResizable({
			handle : modalResizer,
			onDrag : function(){
				modalContent.setStyles({
					height : ( modalWindow.clientHeight - ( this.options.title ? modalTitle.getStyle('height').toInt() : 0 ) )+'px'
				});
			}.bind(this),
			limit: {
				x : [ 100, this.options.container.getSize().x ],
				y : [ 75, this.options.container.getSize().y ]
			}
		})
		modalResizer.setStyles({
			cursor	: 'se-resize'
		});

	},

	resizePopup : function( newHeight, shift ){

		modalContent.set('tween', {
			duration: 750
		}).tween('height', ( newHeight - ( this.options.title ? modalTitle.getStyle('height').toInt() : 0 ) ) );

		var moveHeight = function(){
			modalWindow.set('tween', {
				duration: 750
			}).tween('height', newHeight );
		}.delay(0);

		if( shift ) {
			var moveTop = function(){
				modalWindow.set('tween', {
					duration: 750
				}).tween('top', ( ( window.getSize().y / 2 ) - ( newHeight / 2 ) + window.pageYOffset ) );
			}.delay(750);
		}

		return false;
	},

	killStraglers : function(){

		if( $('modalOverlay') )
			$('modalOverlay').destroy();
		if( $('modalWindow') )
			$('modalWindow').destroy();

	},

	closePopup : function(){

		modalOverlay.fade('out');
		modalWindow.fade('out');
		var killEm = function(){
			if( $('modalOverlay') )
				$('modalOverlay').destroy();
			if( $('modalWindow') )
				$('modalWindow').destroy();
		}.delay(750);

		return false;

	}

});

Second, the CSS.

I’m using the CSS3 rounded borders here, but it will roll back to normal borders if the viewer is using IE.

#modalWindow{
	background-color		: #FFFFFF;
	border				: 10px solid #222;
	border-radius			: 10px;
	-moz-border-radius		: 10px;
	-webkit-border-radius		: 10px;
}

#modalTitle{
	font-size			: 14px;
	font-weight			: bold;
	color				: #FFF;
	height				: 30px;
	background-color		: #222;
}

#modalContent{
	background-color		: #FFFFFF;
}

#modalClose{
	background-image		: url(images/close.png);
	height				: 16px;
	width				: 16px;
	margin				: 5px;
}

#modalResize{
	background-image		: url(images/resize.png);
	height				: 17px;
	width				: 17px;
}

Lastly, the calling methods.

I’ve added both methods here, first attaching to a single element.

Moodal = new MoodalWindow( $('moobox-link'));

Second, attaching to any link with a class of “moobox”.

$$('a.moobox').each(function(element){
	Moodal = new MoodalWindow( element );
});

Available options:

height : Pixel height of the Modal Window. (EG: 250)
width : Pixel width of the Modal Window. (EG: 350)
overlayColor : Hex colour of the overlay. (EG: ‘#AAAAAA’/'#AAA’)
overlayTransparency : Transparency level of the overlay, from 0 to 1. (EG: 0.4)
overlayClose : Boolean value, if you want the modal window to close when you click the overlay background. (EG: true/false)
move : Boolean value, if you want the user to be able to move the Modal window around, using the Title Bar as a handle. (EG: true/false)
resize : Boolean value, if you want the user to be able to resize the Modal Window, from the bottom right corner. If this is set to true, the window will not auto position itself when the window scrolls, or resizes. (EG: true/false)
url : URL to be opened in the modal window. If this is not set, the class will use the HREF from the link. (EG: ‘users/rob/index.php’)
title : Title bar text, if this is set to false, the title bar will not appear, disabling the close button, and the move/drag feature. If this is not set, the code will attempt to get a “TITLE” variable from the link, or failing that, the text from inside the link.

Options Example:

Moodal = new MoodalWindow( $('link-id', {
	height			: 700,
	width			: 600,
	overlayColor		: '#000000',
	overlayTransparency	: 0.7,
	overlayClose		: true,
	move			: true,
	resize			: true,
	url			: '/test/hello-world.html',
	title			: 'Hello World!'
});

Share and Enjoy:

Modal, Mootools, Window

Comments

Ashley Neilson

September 25th, 2009 at 1:20 AM

Very impressive write up Bob, I’ll give it a go! and a lovely new site to.
Rob

September 25th, 2009 at 1:04 PM

Thanks mate. Hoping it’ll help someone out. I made it after the guys at work couldn’t find any simple Modal Windows which worked with Mootools 1.2+. I’m rather proud of it, as my first attempt at writing something like this.

BlackFade.com

Moodal Window for MooTools 1.2.3.1

Here are the image files you will need (I suggest you find something better, these were just temp images for me).

First the Javascript (I’m assuming you’ve got MooTools Code and More installed)

Second, the CSS.

Lastly, the calling methods.

Available options:

Options Example:

Comments

Leave a Reply

The Cloud

My Gamertag

Categories

Meta