HTML, CSS & PHP - 防止模态框自动关闭答案

【问题标题】：HTML, CSS & PHP - Prevent modal box from closing automaticallyHTML, CSS & PHP - 防止模态框自动关闭
【发布时间】：2019-03-11 04:04:02
【问题描述】：

我创建了一个模式框，当用户单击按钮时会打开它，但一秒钟后它会自动关闭并刷新网页。我不知道它是什么原因，但我认为这是因为按钮在 while 循环内：

这是我在 PHP 中的代码 sn-p：

while{
echo "<tr>
                         <td align = 'center'>$Reporter_Fname $Reporter_Lname</td>
                         <td align = 'center'>$Report_Location</td>
                         <td align = 'center'>$Report_Latitude</td>
                         <td align = 'center'>$Report_Longitude</td>
                         <td align = 'center'>$Report_Date</td>
                         <td align = 'center'>$Report_Time</td>
                         <td align = 'center'>$Report_Note</td>
                         <td align = 'center'><button id='myBtn'>View Images</button> //THE BUTTON THAT WILL BE CLICKED TO OPEN MODAL BOX
                         </td>
                         <td><a href = 'Report_Status.php?positive=$Report_ID' role = 'button'> Positive </a><br><a href = 'Report_Status.php?negative=$Report_ID' role = 'button'> Negative </a></td></tr></thead>";

Snipper 代码 HTML（单击按钮时）

<div id='myModal' class='modal'>
             <div class='modal-content'>
                 <div class='modal-header'>
                     <span class='close'>&times;</span>
                     <h2>Images</h2>
                </div>
                <div class='modal-body'>
                    <p>Images</p>
                </div>
             </div>
         </div>

这个 HTML snipper 代码现在位于 PHP 的 while 循环之外

这是我从 W3schools 获得的完整代码以获取更多信息：Modal Box using HTML, CSS & Javascript

如何防止模态框自动关闭以及点击按钮后网页刷新是什么原因？

【问题讨论】：

它出现在 PHP sn-p 中，好像你在结尾处缺少双引号 (")，在结束 } 之前
糟糕，我的错。我忘了包括它..仍然没有解决它????

标签： javascript php jquery html css

【解决方案1】：

在循环中，您有重复的 id myBtn，这可能会导致您的脚本出现故障。你应该有唯一的 id，但我只会使用一个类：

while(true): ?>
    <tr>
        <td align = 'center'><?php echo $Reporter_Fname.' '.$Reporter_Lname ?></td>
        <td align = 'center'><?php echo $Report_Location ?></td>
        <td align = 'center'><?php echo $Report_Latitude ?></td>
        <td align = 'center'><?php echo $Report_Longitude ?></td>
        <td align = 'center'><?php echo $Report_Date ?></td>
        <td align = 'center'><?php echo $Report_Time ?></td>
        <td align = 'center'><?php echo $Report_Note ?></td>
        <!-- Use class="myBtn" instead of id="myBtn" -->
        <td align='center'><button class='myBtn'>View Images</button></td>
        <td><a href='Report_Status.php?positive=<?php echo $Report_ID ?>' role = 'button'> Positive </a><br><a href='Report_Status.php?negative=<?php echo $Report_ID ?>' role = 'button'> Negative </a>
        </td>
    </tr>
<?php endwhile ?>

对于监听器，我只会使用 jQuery，但如果不使用该框架，您可以使用基本的 javascript 来做事件监听器：

<script>

    for(var i = 0; i < document.getElementsByClassName('myBtn').length; i++) {
        document.getElementsByClassName('myBtn')[i].addEventListener('click', function(){
            // If you are going to use only one modal, you should have a way to drop the
            // images into the single modal, perhaps by using "innerHTML" and the use of "this"
            document.getElementById('myModal').style.display = "block";
        });
    }

</script>

【讨论】：