Распахивающееся модальное окно

Недостающие общие функции можно взять в файле js.js, недостающие стили в файле styles.css.

Исходный код этого примера:

<META NAME="KeyWords" CONTENT="навигация,JavaScript,окно">
<title>Распахивающееся модальное окно</title>

<script>
    var whOpen = { // распахивание окна
        o: null,
        h:0,
        h0:10,
        mh:0,
        t:null,
        hh: function () {
            if(this.h<this.mh){
                this.h+=this.h0;if(this.h>this.mh)this.h=this.mh;
                this.o.style.height=this.h+'px';
            }else{
                clearInterval(this.t); this.t=null;
            }
        },
        start:function(){
            var o=getElementsByClass('fb-win1',null,'DIV');
            if(o)o=o[o.length-1];
            var c=window.getComputedStyle(o, null);
            this.mh=parseInt(c.height);
            c=o.style;
            c.height=this.h+'px';
            c.overflow='hidden';
            this.o=o;
            this.h=this.h0;
            if(this.t)clearInterval(this.t);
            this.t=setInterval("whOpen.hh()",7);
            o.previousSibling.onclick=function(){whOpen.close(); return !1;};
            o=o.firstChild;
            removeEvent(document, "keydown", fb_close);
            addEvent(document, "keydown", whOpen.close);
            o.onclick=function(){whOpen.close(); return !1;};
        },
        hc: function () {
            if(this.h>this.h0){
                this.h-=this.h0;
                this.o.style.height=this.h+'px';
            }else{
                clearInterval(this.t); this.t=null;
                fb_close();
            }
        },
       close:function(e) {
            if(typeof(e)=='object'){
                e=e||window.event;
                if(e.type=='keydown'){
                    if(e.keyCode==27)whOpen.close(); // Esc
                    return;
                }
            }
            removeEvent(document, "keydown", whOpen.close);
            if(this.t)clearInterval(this.t);
            this.t=setInterval("whOpen.hc()",7);
        }

        };
    setTimeout(fff1,1500);

    function fff1() {
        fb_win("<div id='aa'>Это тестовое окно<br>Это тестовое окно<br>Это тестовое окно<br>Это тестовое окно<br>"+
            "Это тестовое окно<br>Это тестовое окно<br>Это тестовое окно<br>Это тестовое окно<br>Это тестовое окно<br>"+
            "Это тестовое окно<br>Это тестовое окно<br>Это тестовое окно<br>Это тестовое окно<br>Это тестовое окно<br>"+
            "Это тестовое окно<br>Это тестовое окно<br>Это тестовое окно<br>Это тестовое окно<br>Это тестовое окно<br>"+
            "Это тестовое окно<br>Это тестовое окно<br>Это тестовое окно<br>Это тестовое окно<br>Это тестовое окно<br>"+
            "<a href='#' onclick='whOpen.start();return !1' style='display: block;width:20px;margin: 0 auto'>Повторить</a></div>");
        whOpen.start();
    }


    function fb_win(html){
        fb_modal=document.createElement('div');
        fb_modal.setAttribute('class','fb-win');
        fb_modal.innerHTML='<div class="fb-win0" onclick="fb_close()"></div><div class="fb-win1">'+
            '<a class="i_del close" onclick="fb_close();return false;" title="Закрыть" href="#"></a>'+html+'</div>';
        document.body.appendChild(fb_modal);
        addEvent(document, "keydown", fb_close);
        return fb_modal;
    }

    function fb_close(e){// вызывается при нажатии клавиши в модальном окне и при нажатии на крестик
        if(typeof(e)=='object'){
            e=e||window.event;
            if(e.type=='keydown'){
                if(e.keyCode==27)fb_close(); // Esc
                return;
            }
        }
        var a=getElementsByClass('fb-win',null,'DIV');
        if(a){
            removeID(a[a.length-1]);
            if(a.length<2)removeEvent(document, "keydown", fb_close);
        }
    }

</script>
<h1>Распахивающееся модальное окно</h1>

<p>Модальное окно плавно распахивается вниз</p>
<a href='#' onclick='fff1();return !1' style='display: block;width:20px;margin: 0 auto'>Повторить</a></div>