javascript - 如何在 FOREACH 中使用 Modal-6ren

javascript - 如何在 FOREACH 中使用 Modal

转载作者：行者123 更新时间：2023-11-28 18:35:15

我有一个在选择按钮时弹出的模式。此模式应填充用户的姓名。

问题是，当我选择该按钮时，它仅填充第一个用户的详细信息，而不填充表中其余用户的详细信息。我不明白为什么。如果有人能指出原因，我将不胜感激。

这是我的代码

<?php
    class afficherUser {
        function connection(){
            $con=mysql_connect('localhost','root','');
            mysql_select_db('UserTable');
        }

        function ShowUser(){
            $sql="SELECT*FROM users  LIMIT 3 ";
            $req= mysql_query($sql);

            while ($data=mysql_fetch_assoc($req)) {
                $tab[]=$data;
            }
            return $tab;
        }    
    }

    $data=new afficherUser();
    $data->connection();
    $result=$data->ShowUser();

?>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">

</head>
<body>

<?php foreach ($result as $value):?>

<!-- Trigger/Open The Model -->
<button id="myBtn" class="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">

   <?php echo $value["user"]." ".$value["u_id"];?>


    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>


<?php endforeach; ?>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
</body>
</html>

最佳答案

模态 ID 应该是唯一的，并且应该有一种方法来识别模态 ID，以便触发相关模态。

按钮元素，

<button id="myBtn" class="myBtn" onclick="ShowModal('myModal-<?= $value["u_id"]?>')"Open Modal</button>

然后是模态 ID，

<div id="myModal-<?= $value["u_id"]; ?>" class="modal">

和 JavaScript

function ShowModal(id)
{
  var modal = document.getElementById(id);
  modal.style.display = "block";
}

关于javascript - 如何在 FOREACH 中使用 Modal，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37224353/

文章推荐： python - 如何解压 mnist 数据集？

文章推荐： python - django 表单错误 :"the choice is not one of available choices"

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在 FOREACH 中使用 Modal