JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">Tem a certeza?</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" id="confirmar" class="btn btn-primary">Confirmar</button>
</div>
</div>
</div>
</div>
<table id="sample" class="reference" style="width:100%">
<tbody>
<tr>
<th>Number</th>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Delete</th>
</tr>
<tr>
<td>1</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal"><span class="entypdestination-ido-cancel-squared"></span> Remover</button>
</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Doe</td>
<td>80</td>
<td>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal"><span class="entypdestination-ido-cancel-squared"></span> Remover</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>
<button type="button" class="btn btn-danger"...
CSS
/*
Orange: EE872A
Green: 8AC007
Lightgreen: e5eecc
Blue: 40B3DF
DarkGreyBg: 555555
LightGreyBg: f1f1f1 F6F4F0
GreyBorder: D4D4D4
Pink: B4009E
*/
html {
overflow-y:scroll;
}
body {
font-size:14px;
color:#404040;
background-color:#f1f1f1;
margin:0px;
}
body, p, h1, h2, h3, h4, table, td, th, ul, ol, textarea, input {
font-family:verdana, helvetica, arial, sans-serif;
}
iframe {
margin:0px;
}
img {
border:0;
}
table, th, td, input, textarea {
font-size:100%;
}
h1 {
font-size:28px;
margin-top:0px;
font-weight:normal
}
h2 {
font-size:22px;
margin-top:10px;
margin-bottom:10px;
font-weight:normal
}
h3 {
font-size:17px;
font-weight:normal
}
h4 {
font-size:12px;
}
h5 {
font-size:11px;
}
h6 {
font-size:10px;
}
h1, h2, h3, h4, h5, h6 {
background-color:transparent;
color:#000000;
}
#top {
width:1220px;
margin:auto;
height:60px;
}
#topLogo {
text-align:left;
float:left;
margin-top:20px;
margin-left:10px;
}
#searchSection {
height:60px;
margin-right:0px;
margin-top:5px;
text-align:left;
}
#searchText {
color:#777777;
font-size:11px;
font-style:italic;
padding-top:3px;
}
#translateSection {
height:30px;
}
#topnav {
height:25px;
background-color:#d3d3d3;
}
#topnavTut {
height:20px;
width:1190px;
margin:auto;
word-spacing:12px;
font-size:12px;
padding-left:10px;
padding-right:20px;
padding-top:5px;
background-color:#d3d3d3;
}
a.topnav:link, a.topnav:visited {
color:#555555;
text-decoration:none;
}
a.topnav:hover, a.topnav:active {
color:#ff4800;
text-decoration:none;
}
#topnavSpace {
margin-left:290px;
}
#belowTopnav {
width:1220px;
margin:auto;
}
#page {
width:1024px;
float:left;
margin-left:10px;
margin-top:10px;
padding-top:10px;
padding-bottom:20px;
box-shadow: 0px 0px 20px 3px #d3d3d3;
border-radius:4px;
...
JavaScript
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // botão que abriu o modal
var aRemover = button.closest('tr');
$('#confirmar').on('click', function () {
$('#myModal').modal('hide')
aRemover.fadeOut(500, function () {
aRemover.remove();
});
});
});
$('#myModal').on('hide.bs.modal', function (event) {
$('#confirmar').off('click');
});