Question

基本上我有一个表格，它是从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>

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：我知道在一个内部放置html和点击事件可能不是最好的主意，但它是迄今为止我想要实现的目标的唯一解决方案

链接到Jfiddle：https://jsfiddle.net/callumsmith1991/yrkdk2js/

Answer 1

尝试使用此代码，您遇到错误，当您点击关闭时，启动事件“打开”。

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');
    });
});

Answer 2

您必须将z-index:999添加到.ModalBox类，并将JS替换为关闭模式：

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

希望这可以帮助你。

模态框在点击时不会消失

2 个答案: