МОЕ МОДАЛЬНОЕ ОКНО

МОЕ МОДАЛЬНОЕ ОКНО

by yoowordpress

HTML

<body class="home">
<span class="max" data-href='#cr-modal'>Модальное окно</span>
<div id="cr-modal">
    <div class="cr-modal-head">
        <h3>Адаптация иллюстрирует художественный вкус.</h3>
        <span class="cr-modal-close">X</span>
    </div>
    <div>Адаптация иллюстрирует художественный вкус. Притча изящно вызывает неизменный художественный талант. Сангвиник диссонирует персональный комплекс априорной бисексуальности. Эти слова совершенно справедливы, однако культовый образ многопланово представляет собой структурализм. Действительно, идея самоценности искусства просветляет филогенез.Адаптация иллюстрирует художественный вкус. Притча изящно вызывает неизменный художественный талант. Сангвиник диссонирует персональный комплекс априорной бисексуальности. Эти слова совершенно справедливы, однако культовый образ многопланово представляет собой структурализм. Действительно, идея самоценности искусства просветляет филогенез.Адаптация иллюстрирует художественный вкус. Притча изящно вызывает неизменный художественный талант. Сангвиник диссонирует персональный комплекс априорной бисексуальности. Эти слова совершенно справедливы, однако культовый образ многопланово представляет собой структурализм. Действительно, идея самоценности искусства просветляет филогенез.</div>
</div>
    Еще в ранних работах Л.Д.Ландау показано, что эротическое вызывает имидазол. Коагуляция, так или иначе, кисло имитирует возбужденный ионообменник. Сублимация трансформирует рацемический художественный ритуал. Бюретка, по определению, имеет самодостаточный полимолекулярный ассоциат.

Гомолог неизменяем. В работе "Парадокс об актере" Дидро обращал внимание на то, как возгонка экранирует неизменный краситель, таким образом, второй комплекс движущих сил получил разработку в трудах А.Берталанфи и Ш.Бюлера. Пластмасса ингибирует белок. Царская водка, как следует из совокупности экспериментальных наблюдений, диссонирует жидкий анод до полного израсходования одного из реагирующих веществ....

CSS

span[data-href] {
    color: #c6c6c6;
    cursor: pointer;
    position:fixed;
}
#cr-modal {
    background-color: #fff;
    border: 1px solid;
    border-radius: 5px;
    display: none;
    padding: 0 0 10px;
    position: absolute;
    z-index: 1003;
}
.cr-modal-close {
    color: #fff;
    cursor: pointer;
}
.cr-modal-head {
    background-color: #000;
    float: left;
    overflow: hidden;
    width: 100%;
}
.cr-modal-head h3 {
    color: #fff;
    float: left;
    margin: 0;
    padding-top: 10px;
    width: 95%;
}

JavaScript

//(function(a){a.fn.PandaModal=function(){this.click(function(){var b=a(this).attr("data-href"),e=a(b).find(".cr-modal-close"),c=a(b).height();a(b).width();var d=a(window).height(),f=a(window).width();a("body.home,body.archive").css("overflow-y","visible");a("body").prepend('<div class="cr-modal-overlay"></div>');a(".cr-modal-overlay").css({width:f,height:d,position:"absolute","background-color":"#000","z-index":999,display:"none",opacity:.7}).fadeIn(500);a(b).css({top:-(c+100)});n=c>d?c+100+10:d/2+ 100+c/2;a(b).show().animate({"margin-top":n},500);a(e).click(function(){a("body.home,body.archive").css("overflow-y","hidden");a(b).animate({"margin-top":0},500);a(".cr-modal-overlay").fadeOut(500);setTimeout(function(){a(b).hide();a(".cr-modal-overlay").remove()},500)});a(".cr-modal-overlay").click(function(){a(b).animate({"margin-top":0},500);a(".cr-modal-overlay").fadeOut(500);setTimeout(function(){a(b).hide();a(".cr-modal-overlay").remove()},500)})})}})(jQuery);

$.fn.PandaModal = function() {
     this.click( function () {
        var target = $(this).attr('data-href'),
            close = $(target) .find('.cr-modal-close'),
           tar_h = $(target) .height(),
            tar_w = $(target) .width(),
           win_h = $(window) .height(),
            win_w = $(window) .width(),
            doc_h = $(document) .height(),
            this_top = $(document).scrollTop();
         $('body.home,body.archive').css('overflow-y','visible');
        
        $('body').prepend('<div class="cr-modal-overlay"></div>');
        $('.cr-modal-overlay') .css({
            'width': win_w,
            'height':doc_h,
            'position': 'absolute',
            'background-color': '#000',
            'z-index': 999,
            'display':'none',
            'opacity': 0.7
        }).fadeIn(500);
        
       $(target) .css({
            'top': -(tar_h+100),
           //'position':'fixed'
        });
         if(tar_h > win_h) {
            n = (tar_h+100)+10
         }...