模态仅在循环中工作一次

时间:2017-05-20 09:28:39

标签: php modal-dialog

我一直在使用PHP的图书馆管理系统。 它有一个页面(collect_fine.php),我已经调用了与每个字段相关的所有字段。循环中来自DB的每个成员。

除了所有记录外,我还会回复一个按钮,以便在点击时激活模态。

代码如下 -

do{?>

<?php
$br_id = $row['Member_id'];
?>
  <tr>
  <td style="outline:1px dotted #000000" height="auto"  width="80px" align="center"><?php echo $row['Member_id']?></td>
  <?php
    $mem_id = $row['Member_id'];  
  ?>
  <td style="outline:1px dotted #000000" height="auto"  width="340px" align="justify">&nbsp;&nbsp;&nbsp;<?php echo $row["Member_name"]?></td>  
  <td style="outline:1px dotted #000000" height="auto"  width="130px" align="center"><?php echo $row['Class']?></td>
  <td style="outline:1px dotted #000000" height="auto"  width="150px" align="center"><?php echo $row['Contact']?></td>
  <td style="outline:1px dotted #000000" height="auto"  width="120px" align="center"><?php
  $count=mysqli_query($conn,"SELECT COUNT(Book_id) AS total_things FROM issued_books WHERE Borrower_id = '$br_id' AND Date_returned = '0'");
  $cnt = mysqli_fetch_array($count,MYSQL_ASSOC);
  $num_results = $cnt["total_things"];
  echo $num_results;
?></td>
  <td style="outline:1px dotted #000000" height="auto"  width="80" align="center"><?php echo $row['Fine_Amt']?></td>
  <td style="outline:1px dotted #000000" width="120px" align="center">
 <?php
 date_default_timezone_set('Asia/Kolkata');
 $date = date('Y-m-d H:i:s');
 if($row['Fine_Amt']>0)
 {
 echo '<style>

@media screen {
    #printSection {
        display: none;
    }
}
@media print {
    body * {
        visibility:hidden;
    }
    #printSection, #printSection * {
        visibility:visible;
    }
    #printSection {
        position:absolute;
        left:0;
        top:0;
    }
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
</style>
<button id="myBtn">Collect Fine</button>

<div id="myModal" class="modal">

  <div class="modal-content">
    <span class="close">&times;</span>';
    echo '<p><h1>NTHS eLibrary</h1></br>
    <h2>Fine Reciept of '.$row['Member_name'].'</h2></br>
    <div align="center">';

    ?>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
<?php }while($row=mysqli_fetch_array($Result));?>

上面的代码完全正常但只适用于顶行:(

原因可能是什么原因。请帮忙

1 个答案:

答案 0 :(得分:1)

在HTML中,&#39; id&#39;属性应该是唯一的。您正在尝试设置相同的内容&#39;到所有按钮。尝试动态设置按钮ID。