JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<div class="container">
    <table>
        <tbody>
            <tr>
                <th>No.</th>
                <th>Categories</th>
                <th>Sub-Categories</th>
                <th>Counts</th>
                <th>description</th>
            </tr>
            <tr class="" data-href="#entry1">
                <td>1</td>
                <td>Category 1</td>
                <td>Sub-Category 1</td>
                <td>12</td>
                <td>This is a test</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Category 2</td>
                <td>Sub-Category 2</td>
                <td>14</td>
                <td>This is a test again</td>
            </tr>
        </tbody>
    </table>
    <div id="entry1" class="largWin"> <a href="#" class="close">X</a>

       
    </div>
</div>

CSS

.container {
    height:100%;
    width:100%;
}
table {
    border:1px solid #ccc;
    text-align:center;
}
table th {
    background:#e3e3e3
}
table tr td {
    width:200px;
    border-top:1px solid #ccc
}
table tr:hover td {
    cursor:pointer;
    background:#ccc
}
.largWin {
    padding:20px;
    background-color:#fff;
    border:1px solid #ccc;
    display:none;
    z-index: 99999;
    width:400px;
    height:400px;
    position:absolute;
    overflow:scroll;
}
#mask {
    display: none;
    background: #666;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    -moz-opacity:0.80;
    opacity:0.80;
    z-index: 999;
}
.close {
    font:2em tahoma;
    color:red;
    text-decoration:none;
}

JavaScript

$(document).ready(function () {
    $('tr.popupOpen').click(function () {

       // var popup = $(this).attr('data-href');

       

       

        // Add the mask to body
        $('div.container').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);

        return false;
    });

    $('a.close, #mask').live('click', function () {
        $('#mask , .largWin').fadeOut(300, function () {
            $('#mask').remove();
        });
        return false;
    });
});