Javascript 为php中的每个元素生成唯一的模态_Javascript_Php_Jquery_Html

Javascript 为php中的每个元素生成唯一的模态

javascript php jquery html

Javascript 为php中的每个元素生成唯一的模态,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我有一个项目，用户从列表中选择一个项目（从MySQL数据库获取），然后输出从该项目命名的按钮因此：迄今为止我的（精简）代码： <!DOCTYPE html> <html> </head> <body> <h2>Select User:</h2> <div> <form method="POST"> <table border="5">

我有一个项目，用户从列表中选择一个项目（从MySQL数据库获取），然后输出从该项目命名的按钮因此：

迄今为止我的（精简）代码：

<!DOCTYPE html>
<html>
</head>
    <body>
    <h2>Select User:</h2>
    <div>
    <form method="POST">
    <table border="5">
       <thead>
           <th></th>
           <th>Subject</th>

        </thead>
        <tbody>
<?php
            include('get.php');
               $query=mysqli_query($conn,"select * from `subjects`");
            while($row=mysqli_fetch_array($query)){
         ?>
            <tr>
                <td><input type="checkbox" value="<?php echo $row['subject']; ?>" name="id[]"></td>
                <td><?php echo $row['subject']; ?></td>
            </tr>
            <?php
          }
       ?>
   </tbody>
    </table>
<br>
<input type="submit" name="submit" value="Submit">
   </form>
    </div>
    <div>
        <h2>Subjects selected:</h2>
    <?php
        if (isset($_POST['submit'])){
            foreach ($_POST['id'] as $id):
                $sq=mysqli_query($conn,"select * from `subjects` where subject='$id'");
                $srow=mysqli_fetch_array($sq);
    ?>
            <button class="button animate" id="myBtn">
                <span> 
                    <?php echo $srow['subject']; ?> 
                 </span> 
             </button>
            <?php
              endforeach;
              }
            ?>
        </div>
        <div id="myModal" class="modal">
      <div class="modal-content">
       <span class="close">&times;</span>
      <p>Some text in the Modal..</p>
   </div>
  <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";
 }
   }
   </script>


选择用户：
主题


选定的受试者：
编写一个函数，它将为您构建一个模型。让这个函数接受一些输入，比如你想要显示的模态的内容。然后将模态添加到页面中。这样，您可以根据单击的按钮生成无限多的不同模态
我在下面做了一个例子，演示了这是如何工作的。该示例使用与您的示例相同的结构构建一个模式，并使用按钮的value
属性设置该模式的内容。对于简单的文本，这很好，但是对于大量的HTML，您可以考虑从隐藏元素中获取内容，并复制该元素的

//用于检查模式是否已打开的标志。
//这样我们就可以跟踪打开的模式和
//在关闭第一个之前，不要打开第二个。
让modalOpen=false；
函数createModal（html=''）{
//创建元素。
const modal=document.createElement（'div'）；
const content=document.createElement（'div'）；
const close=document.createElement（'span'）；
//向元素添加类。
modal.classList.add（'modal'）；
content.classList.add（'modal-content'）；
close.classList.add（'close'，'jsclose-modal'）；
//向元素添加内容。
insertAdjacentHTML（'beforeend'，html）；
close.innerHTML='×；'；
//将子项附加到父项和文档。
内容。追加子项（关闭）；
模态。附加子对象（内容）；
document.body.appendChild（模态）；
返回模式；
}
//侦听文档中的单击。
document.addEventListener（'click'，event=>{
//如果已单击“创建模式”按钮，则创建模式。
const-button=event.target.closest（'.js-create-modal'）；
if（按钮！==null&&modalOpen===false）{
const html=button.value；
createModal（html）；
modalOpen=真；
}
//如果已单击关闭模式，请删除该模式。
const close=event.target.closest（'.js close model'）；
如果（关闭！==null）{
const modal=close.closest（'.modal'）；
modal.remove（）；
莫达洛彭=假；
}
});
*，*：：之前，*：：之后{
框大小：边框框；
}
.莫代尔{
显示：块；
位置：固定；
最高：50%；
左：50%；
宽度：100%；
身高：90%；
最大宽度：32em；
最大高度：48em；
盒影：0.20px 0 rgba（0,0,0,0.25）；
填充：15px；
转换：翻译（-50%，-50%）；
背景：#ffffff；
边框：1px实心#d0；
边界半径：5px；
z指数：99；
}
.模态内容{
填充：15px；
}
.结束{
位置：绝对位置；
顶部：15px；
右：15px；
光标：指针；
}
模式1
模式2
模式3
感谢您抽出时间。很好！