如何在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

回答

相關問題