Question

我一直试图在for循环中创建一个模式框。我想要的是表格的每一行都必须有一个按钮，如果单击该按钮，将打开一个模式框。这是我的进度：

我的问题是，每当我单击按钮时，它都会刷新网页。这是我的代码段：

while ($Row = mysqli_fetch_array($Retrieval_Query, MYSQLI_ASSOC)){
$Report_User              = $Row['User_ID'];
$Report_ID                = $Row['Report_ID'];
$Report_Location          = $Row['Report_Location'];
$Report_Latitude          = $Row['Report_Latitude'];
$Report_Longitude         = $Row['Report_Longitude'];
$Report_Date              = $Row['Report_Date'];
$Report_Time              = $Row['Report_Time'];
$Report_Status            = $Row['Report_Status'];
$Report_Comment           = $Row['Report_Comment'];

$Retrieve_User = "SELECT * FROM User WHERE User_ID = $Report_User";
$Retrieval_User = mysqli_query($Connection, $Retrieve_User) or die ("Could not retrieve data from database because: ".mysqli_error($Connection)); 

while($User = mysqli_fetch_array($Retrieval_User, MYSQLI_ASSOC)){
     $Reporter_Fname    = $User['User_Fname'];
     $Reporter_Lname    = $User['User_Lname'];
}

?>

<tr>
    <td><input type="checkbox" name="checked_id[]" class="checkbox" value="<?php echo $Report_ID; ?>"/></td>
    <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_Comment"; ?></td>
    <td align = 'center'><button class="trigger">View Images</button>
    <div class="modal">
    <div class="modal-content">
        <span class="close-button">&times;</span>
        <h1>Hello, I am a modal!</h1>
    </div>
</div>
    </td>
    <td align = 'center'>
    <?php if ($Report_Status == 1)
    echo "<a href = 'Report_Status.php?positive=$Report_ID' role = 'button'> Approve </a><hr>
          <a href = 'Report_Status.php?negative=$Report_ID' role = 'button'> Disapprove </a></td></tr></thead>";

}
?>

这是我的CSS代码：

.modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transform: scale(1.1);
        transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    }
    .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 1rem 1.5rem;
        width: 24rem;
        border-radius: 0.5rem;
    }
    .close-button {
        float: right;
        width: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
        cursor: pointer;
        border-radius: 0.25rem;
        background-color: lightgray;
    }
    .close-button:hover {
        background-color: darkgray;
    }
    .show-modal {
        opacity: 1;
        visibility: visible;
        transform: scale(1.0);
        transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
    }

这是我的Javascript代码：

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");

function toggleModal() {
    modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

问题

是什么导致它在单击按钮时自动刷新？
如何解决此问题并查看模式框及其内容？

P.S。

我从这里获得了模态框的代码：https://sabe.io/tutorials/how-to-create-modal-popup-box

HTML，JS，CSS和PHP-单击按钮打开模式框时，页面会自动刷新

0 个答案: