jquery好多代码能实现的.mootools只要几行

上代码:
<script type="text/javascript">
var tipBox=function(){
    //底层
    var olbox=new Element('div',{
        'id':'olbox',
    });
    var ol=new Element('div',{
        'id':'ol',
        'styles':{
            'opacity':'0.2',
        },
    });
    var tip=$('tipwindow');
    //弹出层进入到底层中
    tip.inject(olbox);
    ol.inject(tip,'before');
    //显示弹出窗口
    tip.removeClass('hid');
    var width=window.getScrollSize().x;
    var height=window.getScrollSize().y;
    //firefox6下底部有少许没盖住
    if(Browser.Engine.gecko || Browser.Engine.webkit || Browser.Engine.presto) height+=30;
    olbox.setStyles({
        'width':width,
        'height':height,
    });
    //把底层写入DOM
    olbox.inject('sitepage','before');
    tip.getElementById('tipbtn').addEvent('click',function(){
        olbox.fade('hide');
        tip.addClass('hid');
    });
}
window.addEvent("domready", tipBox);
</script>

需要的其它HTML:
<div id="tipwindow" class="hid">
    <h2>提示窗口</h2>
    <div>您的留言已成功提交.感谢您对本站的支持</div>
    <p><input type="button" value="确认" id="tipbtn" name="tipbtn"></p>
</div>

样式代码:
.hid{display:none;}
#olbox{display:block;position:absolute;top:0;left:0;z-index:2012;text-align:center;}
#olbox #ol{display:block;float:left;position:absolute;left:0;top:0;background-color:#000;margin:0;padding:0;width:100%;height:100%;}
#olbox #tipwindow{position:fixed;border:4px solid #ddd;width:400px;height:200px;left:35%;top:10%;background-color:#f0f0f0;padding:10px;z-index:2015;box-shadow:0 0 18px rgba(0, 0, 0, 0.4);}
#tipwindow h2{height:30px;line-height:30px;padding-left:5px;color:#333;}
#tipwindow div{height:140px;line-height:140px;text-align:center;padding:0;background-color:#FFFFFF; background:-moz-linear-gradient(100% 100% 107deg, #FFFFFF, #F4F9FB) repeat scroll 0 0 transparent;width:100%;}
#tipwindow p{text-align:right;height:20px;width:100%;padding-top:10px;}
#tipwindow p,#tipwindow div,#tipwindow h2{float:left;margin:0;}

有天去面试哪个面试人看我以前作品时看到这个问了几个问题.不过哪都是三年前作品.用的是纯JS

原来是这样 

以前用jquery，现在用mootools

原来是这样