MooTools Modal Box

Create a simple modal box with Mootools.

Html

<a href='#' id='pop' title='MOOTOOLS MODAL BOX - DEMO'>open</a>

PHP (request.php)

<?php 
echo '<pre>';
print_r($_GET);
echo '</pre>';
?>

MooTools

<script>
window.addEvent('domready', function(){

	$('pop').addEvents({'click': function(e){
		new Event(e).stop();

		var pop_max1 = new Element('div').injectInside(document.body);
		pop_max1.setStyles({width:'100%',height: window.getScrollSize().y,opacity: 0.7,background: '#000',position:'absolute',top:0,left:0,'z-index':5});
		
		var pop_max2 = new Element('div').injectInside(document.body);
		pop_max2.setStyles({width:'100%',height: window.getScrollSize().y,position:'absolute',top:0,left:0,'z-index':6});
		
		var pop_box1 = new Element('div').inject(pop_max2,'top');
		pop_box1.setStyles({width: 300,height:100,background:'#fff',position:'relative',marginLeft:'auto',marginRight:'auto',marginTop:(window.getScrollTop()+120),'z-index':7});
		
		var pop_text = new Element('div').inject(pop_box1 ,'inside');
		pop_text.setStyles({padding:10});
		
		var title = this.get('title');
		
		new Request.HTML({
		url:'request.php',
		method: 'get',
		data: {'title':title},
		update: pop_text
		}).send();
		
		var log_close  = new Element('div').inject(pop_box1,'inside');
		log_close.setStyles({width:30,height:30,background:'#006699',position:'absolute',top:0,right:0,cursor:'pointer','font-weight':700,'font-size':'30px',color:'#fff'});

		log_close.addEvent('click', function(e) {
		pop_max1.destroy();
		pop_max2.destroy();
		});	
		
	}});

}); 
</script>

view demo

Related Posts