JSFiddle - React, Tailwind, and code Playground

by dife

HTML

<table>
   <tr>
     <th>Produto</th>
     <th>Editar</th>
     <th>Apagar</th>
   </tr>
   <tr>
     <td>Mouse</td>
     <td><a href="#" data-id="10" class="edit"><img src="http://community.kqatrailblazers.org/App_Themes/Default/Images/Objects/Blog_Comment/object.png"/></a></td>
     <td><a href="#" data-id="10" class="del"><img src="https://www.mathgraph32.org/IMG/IconesJava/Delete24.gif"/></a></td>
   </tr>
   <tr>
     <td>Teclado</td>
     <td><a href="#" data-id="27" class="edit"><img src="http://community.kqatrailblazers.org/App_Themes/Default/Images/Objects/Blog_Comment/object.png"/></a></td>
     <td><a href="#" data-id="27" class="del"><img src="https://www.mathgraph32.org/IMG/IconesJava/Delete24.gif"/></a></td>
   </tr>
   <tr>
     <td>Monitor</td>
     <td><a href="#" data-id="62" class="edit"><img src="http://community.kqatrailblazers.org/App_Themes/Default/Images/Objects/Blog_Comment/object.png"/></a></td>
     <td><a href="#" data-id="62" class="del"><img src="https://www.mathgraph32.org/IMG/IconesJava/Delete24.gif"/></a></td>
   </tr>
</table>

<div class="modal">
  <div class="top"><a href="#" class="close">Clique para fechar</a></div>
   <div class="interno"></div> 
</div>
<div id="mask"></div>

CSS

body{ background: #FFF; }

#mask{
  position: absolute;
  top: 0;
  width: 100%;
  height: 400px;
  background: rgba(0,0,0,0.6);
  z-index: 1;
  display: none;
}

table{
  margin: 0 auto;
  width: 300px;
  text-align: center;
  border-collapse: collapse;
}

table th{
  background: #4682B4;
  color: #fff;
  text-align: center;
  
  
}

.modal{
  width: 500px;
  height: 400px;
  
  position: absolute; 
  background: #fff;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  border-radius: 10px;
  display: none;
  z-index: 2;
  -webkit-box-shadow: 3px 3px 21px 0px rgba(0,0,0,0.34);
-moz-box-shadow: 3px 3px 21px 0px rgba(0,0,0,0.34);
box-shadow: 3px 3px 21px 0px rgba(0,0,0,0.34);
}


.top{
  width: 100%;
  height: 30px;
  border-radius: 10px;
  
}
.top a{
  padding: 5px;
  position: absolute;
  right: 8px;
  color: #000;
  text-decoration: none;
  
}
.interno{
  width: 95%;
  margin: 0 auto;
  height: 300px;
  background: #009ACD; 
  color: #fff;
}

JavaScript

$(document).ready(function(){
    //Var
	  var edit  = $(".edit");
    var del   = $(".del");
    var modal = $(".modal");
    var close = $(".close");
    var mask  = $("#mask");
    
    //Chama o evento de click  no ícone editar
    edit.on('click', function(e){
        e.preventDefault();    
        
           //armazena o valor do data-attribute
           var id = $(this).data("id");
           
           //armazena a largura e a altura da tela
           var maskHeight = $(document).height();
           var maskWidth = $(window).width();

            //Define largura e altura do div#mask iguais ás dimensões da tela
           mask.css({'width':maskWidth,'height':maskHeight});
            
           //efeito de transição
           mask.fadeIn(1000);
           mask.fadeTo("slow",1);
           
           //Abre o modal 
           modal.slideDown("fast", function() {
              //insere o valor dentro do div class .interno
              /*
                a função html() é a mesma do que 
                document. write();
                Então é ali que você vai inserir
                os dados vindo do banco de dados
                usando a função $.ajax().
              */
              $(".interno").html("ID produto: " + id);  
           });
    });
    
    //ação do botão fechar. 
    close.on('click', function(e){
        e.preventDefault();
        /* Nesta function do slideUp você pode 
           esconder o div id="mask"
        */
         
         modal.slideUp("slow", function() {
             mask.hide();
         });  
         
    });  
    
    //Quando clicar no ícone de excluir
    del.on("click", function(){
            /*testa-se com um confirm perguntando se quer excluir.
              se OK, executa o ajax para excluir
              senão volta para a página!
              O bloco do else é so para demonstração
              é opcional.
            */
            if (confirm("Deseja excluir este item?")) {
               ...