AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

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

Модальное окно плавно распахивается вниз

Повторить


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

<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,1000);

    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();
    }

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

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



.

© Copyright 2008-2017 by KDG