如何在FOREACH中使用Modal

我有一种选择按钮时弹出的模式。这个模式应该填充用户的名字。如何在FOREACH中使用Modal

问题是，当我选择按钮时，它只填充第一个用户的详细信息，而不是表中的其他用户。我不明白为什么。如果有人能指出为什么我会非常感激。

这里是我的代码

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

来源

2016-05-14 Abdessamad

模式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"; 
}

来源

2016-05-14 08:57:01 Rishanthakumar

id应该是唯一的。但是在你的代码中，对于所有模态，所有触发器和一个id不能作出一个id。

举个例子，

<button id="myBtn-<?= $value["u_id"]; ?>" class="myBtn">Open Modal</button>

，并在你的DIV，

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

，并确保您修改JavaScript。

来源

2016-05-14 08:27:46 bfahmi

这里的另一种解决方案，

<?php $count = 0; ?> 
    <?php foreach ($result as $value):?> 
    <button id="myBtn" class="myBtn" data-toggle="modal" data-target="#myModal<?php echo $count; ?>">Open Modal</button> 
    <div id="myModal<?php echo $count; ?>" class="modal fade" role="dialog"> 
     <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 $count++; ?> 
    <?php endforeach; ?>

注意这部分？

data-toggle="modal" data-target="#myModal<?php echo $count; ?>"

它将确定目标模态，并#myModal<?php echo $count; ?>会喜欢

#myModal0, 
#myModal1, 
#myModal2,

在浏览器检查元件。

这个类似，

<div id="myModal<?php echo $count; ?>" class="modal fade" role="dialog">

这个div的ID会像上面一样。原因是，你将在整个循环中有一个唯一的ID。

来源

2016-05-14 08:35:27 Fil

它实际上是1种模式的元素，有没有更有效的方法？ – tomsihap

如何在FOREACH中使用Modal

回答

相关问题