HTML, CSS & PHP - Prevent modal box from closing automatically

Question

I've created a modal box that will open when the user clicks the button but after a second it closes automatically and refreshes the webpage. I don't know what it causes but I think it is because the button is inside the while loop:

Here's my code snippet in 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>";

Snipper code HTML (When the button was clicked)

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

This HTML snipper code is now on the outside of the while loop in PHP

Here's the full code that I got from W3schools for more information: Modal Box using HTML, CSS & Javascript

How do I prevent the modal box from closing automatically and what causes the webage to refresh after clicking the button?

Answer 1

You have, inside your loop, a repetition of the id myBtn which could cause a malfunction in your script. You should have id's that are unique but I would just use a class instead:

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

For the listener, I would just use jQuery but if not using that framework, you could do event listeners using basic 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>