个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 21:42:12 34 4
gpt4 key购买 nike

我有一个项目，用户从列表中选择一个项目(从 MySQL 数据库获取)，然后输出从该项目命名的按钮像这样:

p

到目前为止我的(精简的)代码:

<!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，您可能会考虑从隐藏元素获取内容并复制该元素的 innerHTML 值。

// Flag for checking if a modal is already opened.
// This way we can keep track of the opened modal and
// not open a second one before closing the first.
let modalOpen = false;

function createModal(html = '') {

  // Create the elements.
  const modal = document.createElement('div');
  const content = document.createElement('div');
  const close = document.createElement('span');
  
  // Add classes to the elements.
  modal.classList.add('modal');
  content.classList.add('modal-content');
  close.classList.add('close', 'js-close-modal');
  
  // Add content to the elements.
  content.insertAdjacentHTML('beforeend', html);
  close.innerHTML = '&times;';
  
  // Append children to parents and to the document.
  content.appendChild(close);
  modal.appendChild(content);
  document.body.appendChild(modal);
  
  return modal;
  
}

// Listen for clicks in the document.
document.addEventListener('click', event => {

  // If the create modal button has been clicked, create a modal.
  const button = event.target.closest('.js-create-modal');
  if (button !== null && modalOpen === false) {
    const html = button.value;
    createModal(html);
    modalOpen = true;
  }
  
  // If the close modal has been clicked, remove the modal.
  const close = event.target.closest('.js-close-modal');
  if (close !== null) {
    const modal = close.closest('.modal');
    modal.remove();
    modalOpen = false;
  }
  
});
*, *::before, *::after {
  box-sizing: border-box;
}

.modal {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 90%;
  max-width: 32em;
  max-height: 48em;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
  padding: 15px;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  z-index: 99;
}

.modal-content {
  padding: 15px;
}

.close {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
}
<button class="js-create-modal" value="This is my first modal.">Modal 1</button>
<button class="js-create-modal" value="All the modals have their own content.">Modal 2</button>
<button class="js-create-modal" value="And are unique in every way.">Modal 3</button>

另一种方法是在页面上有一个模式，您可以显示和隐藏它。每当您单击按钮时，您都应该根据您单击的按钮修改模式的内容。这样你只需要修改一个部分。但是，嘿，如果模式是隐藏的，为什么不将其删除并在需要时构建一个新模式呢？您的选择。

关于javascript - 为 php 中的每个元素生成唯一的模态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60341638/

34 4 0
文章推荐： regex - 我不明白为什么这个正则表达式总是返回 false？
文章推荐： java - 如何将通用参数传递给hadoop jar
文章推荐： PHP 错误日志无法正常工作
文章推荐： hadoop - JobTracker和TaskTrackers是否属于HDFS？
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com