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>

Related Posts

MooTools Full Screen, MooTools window size, MooTools mouse position