Jquery 模式框不会在单击时消失

基本上，我有一个表格，它是从WordPress中的帖子填充的，我想在该行的最后一个表格单元格中以模式显示这些帖子的内容。除了关闭模态的单击事件不起作用之外，一切都在工作

<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>

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：我知道把html和点击事件放在一个页面中可能不是最好的主意，但它是目前为止我试图实现的唯一解决方案

---

链接到Jfiddle:

请尝试此代码，当您单击关闭按钮时，出现了一个错误，启动了事件“打开”

---

请尝试此代码，当您单击关闭时，出现了一个错误，启动了事件“打开”

---

您必须将

z-index:999

添加到

.ModalBox

类中，并将关闭模式的JS替换为：

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

---

希望这对您有所帮助。

您必须将

z-index:999

添加到

.ModalBox

类中，并将JS替换为关闭模式：

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

希望这能对你有所帮助

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