Modal Box verschwindet nicht auf Klick

Question

Grundsätzlich habe ich eine Tabelle, die von Posts in WordPress gefüllt ist, möchte ich den Inhalt dieser Beiträge in einem Modal in der Final Table Zelle der Zeile anzuzeigen. Alles funktioniert so weit entfernt von der Tatsache, dass das Click-Event zum Schließen des Modals nicht funktioniert.

<table> 
<tbody> 
<tr style="background-color: #416773; color: #FFF; font-weight: 600;"> 
    <td style="padding-left: 10px;">DATE</td> 
    <td>EVENT</td> 
    <td>CATEGORY</td> 
    <td>TYPE</td> 
    <td>SPONSOR</td> 
    <td>RESULTS</td> 
</tr> 

<tr> 
<td style="padding-left: 10px;">August 23, 2017</td> 
<td>Invit 4 Man Rumble</td> 
<td>Results</td> 
<td>Open</td> 
<td>Wilsons Auctions</td> 
<td class="show-modal"><button>View Results</button><div class="modal"><div class="ModalBox"><span class="close">×</span>Testtttting</div></div></td> 
</tr> 

<tr> 
<td style="padding-left: 10px;">August 23, 2017</td> 
<td>Kevin Heffernan Trophy</td> 
<td>Results</td> 
<td>Invitation</td> 
<td>Countrywide Freight</td> 
<td class="show-modal"><button>View Results</button><div class="modal"><div class="ModalBox"><span class="close">×</span><p>Test</p></div></div></td> 
</tr> 
</tbody> 
</table> 

CSS:

.modal { 
display: none; /* Hidden by default */ 
position: fixed; /* Stay in place */ 
z-index: 1; /* Sit on top */ 
padding-top: 200px; 
left: 0; 
top: 0; 
width: 100%; /* Full width */ 
height: 100%; /* Full height */ 
overflow: auto; /* Enable scroll if needed */ 
background-color: rgb(0,0,0); /* Fallback color */ 
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
color: black; 
} 

.ModalBox { 
background-color: #fefefe; 
margin: auto; 
padding: 20px; 
border: 1px solid #888; 
width: 80%; 
color: black; 
} 

.close { 
color: #aaaaaa; 
float: right; 
font-size: 28px; 
font-weight: bold; 
cursor: pointer; 
} 

Javascript

jQuery(document).ready(function() { 

jQuery(".show-modal").click(function() { 
jQuery(this).find(".modal").css('display', 'block'); 
}); 

jQuery(".close").click(function() { 
jQuery(".modal").css('display', 'none'); 
}); 

}); 

PS: Ich weiß, HTML setzen und Ereignisse klicken Sie innerhalb von ein wahrscheinlich nicht die beste Idee ist, aber es ist bisher das einzige Lösung zu dem, was ich bisher erreichen möchte

Link zu Jfiddle: https://jsfiddle.net/callumsmith1991/yrkdk2js/

Answer 1

Versuchen Sie diesen Code bereits, Sie hatten einen Fehler, als Sie auf die Schließung geklickt haben, startete das Ereignis "open".

jQuery(document).ready(function() { 
    jQuery(".show-modal").on('click', 'button', function() { 
     jQuery(".modal").css('display', 'block'); 
    }); 

    jQuery(".show-modal").on('click', 'span.close', function() { 
     jQuery(".modal").css('display', 'none'); 
    }); 
});