JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

<table class="mytable" border=1>
    <tr descrption="esto es un demo jajajajaja">
        <td>Holas</td>
    </tr>
    <tr descrption="raps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.">
        <td>otroHolas</td>
    </tr>
</table>
<div class="mymodal">
   <span class="close">x</span>
   <div class="modal-body"></div>
</div>

CSS

.close{
    cursor:pointer;
}

.mymodal{
    display:none;
    background-clip: padding-box;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    left: 50%;
    margin: -250px 0 0 -280px;
    outline: medium none;
    position: fixed;
    top: 50%;
    width: 560px;
    z-index: 1050;
}

JavaScript

$('.mytable tr').click(function(e){
    console.log($(this).attr('descrption'));
    $('.modal-body').html( $(this).attr('descrption') );
    $('.mymodal').show();
    console.log($('.mymodal'));
});
$('span.close').click(function(e){
     $('.mymodal').hide();
});