JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<link rel="stylesheet" href="http://www.apo-ucoz.com/apo2013/css/font-awesome.css">
<div class="darkback"></div>
<div class="mainmodaldiv">
    <img id="apospinner" src="http://imapo.ru/images/originsspinner.gif" />
    <table cellspacing="0" valign="top" cellpadding="0" width="100%" id="t1" style="display:none;">
        <tr>
            <td class="td1 td1red">Username</td>
            <td class="td2 td2red">Time on server</td>
        </tr>
        <tr>
            <td class="td1">Apocalypse</td>
            <td class="td2">05:33:17</td>
        </tr>
        <tr>
            <td class="td1">Alex</td>
            <td class="td2">76:11:02</td>
        </tr>
        <tr>
            <td class="td1">Ubivalka</td>
            <td class="td2">69:55:01</td>
        </tr>
    </table>
    <table cellspacing="0" valign="top" cellpadding="0" width="100%" id="t2" style="display:none;">
        <tr>
            <td class="td1 td1red">Username</td>
            <td class="td2 td2red">Time on server</td>
        </tr>
        <tr>
            <td class="td1">Andrey</td>
            <td class="td2">00:01:48</td>
        </tr>
        <tr>
            <td class="td1">Den4ik</td>
            <td class="td2">15:02:39</td>
        </tr>
    </table>
</div>
<table width="800px" height="20px" cellspacing="0" cellpadding="0" class="apomaintable">
    <tr>
        <td width="30px" align="center" class="apotd">w-list</td>
        <td width="30px" align="center" class="apotd">pass</td>
        <td class="apotd">
            <div class="apoflowtd">Name <span class="apovertext">[Official origins mod #LFS] [1.7.9/125548]</span>
            </div>
        </td>
        <td width="95px" class="apotd" align="center">Settings</td>
        <td width="20px" class="apotd">Players</td>
        <td width="20px" class="apotd">Launch</td>
    </tr>
    <tr>
        <td colspan="6" style="height:3px !important;background:#fafafa"></td>
    </tr>
    
    <tr>
        <td width="30px" align="center"...

CSS

body {
    height:3000px;
    margin:0px;
    padding:0px;
}
.darkback {
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    position:fixed;
    z-index:10;
    background:rgba(0, 0, 0, 0.8);
    display:none;
}
.mainmodaldiv {
    position:absolute;
    width:500px;
    height:300px;
    overflow-x:hidden;
    top:50px;
    left:50%;
    margin-left:-250px;
    background:#eee;
    border-radius:5px;
    border:10px solid #fff;
    box-shadow:inset 0px 0px 3px #999;
    z-index:15;
    display:none;
}
.td1 {
    color: #006800;
    text-shadow: 1px 1px 1px #FFF;
    width:300px;
    height:25px;
    background:#ddd;
    padding-left:15px;
    padding-top:5px;
    border-bottom: 1px solid #CCC;
    border-right:1px solid #DDD;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
    /* IE6-9 */
}
.td1red {
    background: -moz-linear-gradient(left, rgba(216, 216, 216, 1) 0%, rgba(255, 255, 255, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(216, 216, 216, 1)), color-stop(100%, rgba(255, 255, 255, 1)));
    /* Chrome,Safari4+ */
    background:...

JavaScript

function openmodal(id) {
    $('#apospinner').show(0);
    $('.darkback').fadeIn(200, function () {
        $('.mainmodaldiv').fadeIn(100, function() {
            $('#apospinner').fadeOut(300, function() {
                $('table#t' + id).fadeIn(100);
            });
        });
    });
}

$(document).ready(function () {
    // При клике по затемнению закрываем модальное окно
    $('.darkback').click(function () {
        $('.darkback,.mainmodaldiv').fadeOut(30);
        $('.mainmodaldiv table').hide(0);
    });
    // Если название сервер не помещается в строку, делаем title с полным названием
    $('div.apoflowtd').each(function () {
        if ($(this).text().length > 86) {
            $(this).attr('title', $(this).text());
        };
    });
});