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要素、

<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一意である必要があります。しかし、あなたのコードでは、すべてのモーダルに対してと1つのidのすべてのトリガーに対して1つを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を使用する方法

答えて

関連する問題