JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript" src="js/jQ143min.js"></script> 
</head> 
<body> 
<a class="open" href="#">
    ClickMe
</a>

    
    
</body> 
</html>

CSS

.modal {
    position:absolute;
    z-index:1001;
    left:50%;
}
.modal > div {
    float:left;
    position:relative;
}
.modalContent {
    background:#ccc;
    overflow:auto;
}
.modalTL {
    background:#aaa url('/images/basket-t-l.png');
    width:40px;
    height:40px;
}
.modalT {
    background:#aaa url('/images/basket-t.png') repeat-x;
    height:40px;
}
.modalTR {
    background:#aaa url('/images/basket-t-r.png');
    width:40px;
    height:40px;
}
.modalBL {
    clear:left;
    background:#aaa url('/images/basket-b-l.png');
    width:40px;
    height:40px;
}
.modalB {
    background:#aaa url('/images/basket-b.png') repeat-x;
    height:40px;
}
.modalBR {
    background:#aaa url('/images/basket-b-r.png');
    width:40px;
    height:40px;
}
.modalL {
    clear:left;
    background:#aaa url('/images/basket-l.png') repeat-y;
    width:40px;
}
.modalR {
    background:#aaa url('/images/basket-r.png') repeat-y;
    width:40px;
}
tr:hover {
    cursor:pointer;   
}
body {
    background:#eee;   
}

JavaScript

$.modalShow = function(p) {
    if($('.modal').size() > 0)
        $.modalRemove();

    p = $.extend({
        modalCss: {
            width: 900,
            height: 'auto',
            top: $(window).scrollTop() + 100,
            left: '50%',
        },
        modalContentCss: {
        },
        opaque: false,
        arrow: false,
        arrowLeftOffset: 100
    }, p || {});

    if(p.opaque) {
        $('body').append('<div class="opaque"></div>');
        $('div.opaque').height($(document).height());
    }

    $('<div class="modal"></div>').appendTo('body')
    .css(p.modalCss)
    .append('<div class="modalTL"></div><div class="modalT"></div><div class="modalTR"></div><div class="modalL"></div><div class="modalContent"></div><div class="modalR"></div><div class="modalBL"></div><div class="modalB"></div><div class="modalBR"></div>');
    $('.modalContent').css(p.modalContentCss);
    if(p.arrow)
        $('.modal').append('<img src="/images/modal_arrow.png" />');
        $('img[src$="modal_arrow.png"]').css('left', p.arrowLeftOffset);

    $(document).bind('keyup.modalClose', function(e){
        if(e.keyCode == 27) {
            $.modalRemove();
        }
    });

    setTimeout(function() {
        // срабатывает слишком рано, потому вешаем после паузы
        $(document).bind('click.modalOutsideClick', function(e){
            if($(e.target).closest('.modal').attr('class') != 'modal')
                $.modalRemove();
        });
    }, 100);

    if(p.ajaxReq) {

        $('.modalContent').load('/engine/ajax.php', p.ajaxReq, function(){
            $.modalUpdate(p);
            p.init();
        });

    } else if(p.divReq) {

        $('.modalContent').html(p.divReq);
        $.modalUpdate(p);

    }

};

$.modalRemove = function() {

    $(document).unbind('keyup.modalClose')
    $(document).unbind('click.modalOutsideClick');
    //$('.opaque, .modal').remove();

};

$.modalUpdate = function(p) {
    p = $.extend({
        modalCss: {
           ...