JSFiddle - React, Tailwind, and code Playground

by BoxMan0617

HTML

<div id="test" class="modal" style="width: 300px; ">
    <div class="dim"></div>
    <div class="ring">
        <div class="header">Test</div>
        <div class="content">
            blah blah blah<br/>
            blah blah blah<br/>
            blah blah blah<br/>
            blah blah blah<br/>
        </div>
        <div class="extra">Send</div>
    </div>
</div>
<a href="javascript:void(0);" name="test" class="displaymodal">Display</a>

CSS

.modal, .modal .ring {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.modal {
    z-index:1 !important;
    -webkit-box-shadow: 0px 0px 25px -2px rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 25px -2px rgba(0, 0, 0, 1);
    position: fixed;
    left: 50%;
    top: -50%;
    border: 1px solid #F5F5F5;
    background: #EDEDED;
}

.modal .ring {
    margin: 3px;
    background-color: white;
    border: 1px solid #CCCCCC;
}

.modal .header, .modal .content, .modal .extra {
    padding: 5px 10px;
}

.modal .content {

}

.modal .header {
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    background: #CCCCCC;
    color: white;
    font-weight: bold;
    font-size: 20px;
}

.modal .extra {
    background: #E0E0E0;
    border-top: 1px solid #D9D9D9;
    -webkit-box-shadow: inset 0px 5px 15px -5px rgba(207, 207, 207, .8);
    box-shadow: inset 0px 5px 15px -5px rgba(207, 207, 207, .8);
    -webkit-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
}

.dim
{
    height:100%;
    width:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:-1 !important;
    background-color:black;
    filter: alpha(opacity=75); /* internet explorer */
    -khtml-opacity: 0.75;      /* khtml, old safari */
    -moz-opacity: 0.75;       /* mozilla, netscape */
    opacity: 0.75;           /* fx, safari, opera */
}

JavaScript

function DisplayModal(name) {
    var modal = $('#' + name);
    var h = modal.css('height');
    var w = modal.css('width');
    modal.css('margin-top', '-' + (parseInt(h) / 2) + 'px');
    modal.css('margin-left', '-' + (parseInt(w) / 2) + 'px');
    modal.css('display', 'block');
    modal.animate({
        top: '53%',
    }, 1000, function() {
        modal.animate({
            top: '48%'
        }, 300, function() {
            modal.animate({
                top: '51%'
            }, 200, function() {
                modal.animate({
                    top: '50%'
                }, 200);
            });
        });
    });
}

$('.modal').css('display', 'none');
$('.displaymodal').click(function() {
    DisplayModal($(this).attr('name'));
});