Question

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

这是我的PHP代码段：

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

狙击代码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侦听器代码现在位于PHP的while循环外部

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

如何防止模式框自动关闭？是什么导致单击按钮后刷新网页？

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

HTML，CSS和PHP-阻止模式框自动关闭

1 个答案: