Генерация уникальных модалов для каждого элемента в php - PullRequest
Новая
       1

Генерация уникальных модалов для каждого элемента в php

0 голосов
/ 21 февраля 2020

У меня есть проект, в котором пользователь выбирает элемент из списка (выбранный из базы данных 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>

Мне удалось сделать модальное для одной кнопки, но я хочу сделать уникальный модальный для каждой кнопки. Как я могу это сделать? Спасибо.

1 Ответ

1 голос
/ 21 февраля 2020

Напишите функцию, которая будет создавать модальные для вас. Сделайте так, чтобы эта функция принимала какой-либо ввод, например, содержимое модального окна, которое вы хотите показать. Затем добавьте модал на страницу. Таким образом, вы можете генерировать бесконечное количество различных модалов, основываясь на кнопке, на которую вы нажимаете.

Ниже приведен пример, который демонстрирует, как это может работать. Этот пример работает с созданием модального стиля, с той же структурой, что и в вашем примере, и с помощью атрибута 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>

Другим способом было бы иметь один модал на странице, который вы показываете и скрываете. Всякий раз, когда вы нажимаете кнопку, вы должны изменять содержимое модального режима в зависимости от кнопки, которую вы нажали. Таким образом, вам нужно изменить только один кусок. Но, эй, если модальный скрыт, почему бы просто не удалить его и построить новый, когда он вам нужен? Ваш выбор.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...