JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

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

CSS

span[data-cr-href] {
    color: #c6c6c6;
    cursor: pointer;
}
.cr-modal-window {
    background-color: #fff;
    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

/*$.fn.PandaModal=function(f){var c=$.extend({overlay:"#000",width:500},f);$("[data-cr-href]").each(function(){var a=$(this).attr("data-cr-href");$(a).addClass("cr-modal-window").css({width:c.width})});this.click(function(){var a=$(this).attr("data-cr-href");$(a).find(".cr-modal-close");var b=$(a).height(),d=$(window).height(),e=$(window).width();$("body.home,body.archive").css("overflow-y","visible");$("body").prepend('<div class="cr-modal-overlay"></div>');$(".cr-modal-overlay").css({width:e,height:d, position:"absolute","background-color":c.overlay,"z-index":999,display:"none",opacity:.7}).fadeIn(500);$(a).css({top:-(b+100),left:e/2-c.width/2});n=b>d?b+100+10:d/2+100+b/2;$(a).show().animate({"margin-top":n},500);$(".cr-modal-overlay,.cr-modal-close").click(function(){$(a).animate({"margin-top":0},500);$(".cr-modal-overlay").fadeOut(500);setTimeout(function(){$(a).hide();$(".cr-modal-overlay").remove()},500)})})};*/
$.fn.PandaModal = function(options) {
    
    var settings = $.extend( {
        'overlay' : '#000',
        'width':500
    }, options);
    
    $('[data-cr-href]').each(function(){
        var modalwindow = $(this).attr('data-cr-href');
        $(modalwindow).addClass('cr-modal-window').css({
        'width': settings.width
        });
    });
    
    this.click( function () {
         
        var target = $(this).attr('data-cr-href'),
            close = $(target) .find('.cr-modal-close'),
            tar_h = $(target) .height(),
            tar_w = settings.width,
            win_h = $(window) .height(),
            doc_h = $(document) .scrolTop(),
            win_w = $(window) .width();
        
         
         $('body.home,body.archive').css('overflow-y','visible')
        
         $('body').prepend('<div class="cr-modal-overlay"></div>');
         $('.cr-modal-overlay') .css({
             'width': win_w,
             'height':win_h,
             'position': 'absolute',
             'background-color': settings.overlay,
            ...