Блог

Главная - Вопросы по программированию - Как я могу сделать несколько динамических всплывающих окон

Как я могу сделать несколько динамических всплывающих окон

#php

Вопрос:

Этот код заполнит таблицу, которую мы найдем. Проблема в том, что когда я могу показать динамическое всплывающее окно, оно работает только в первой строке, но в любом случае не работает

 <tr>
<td><img src="../mysql/img/<?php echo $fila['imagen'];?>" class="logoempresa" alt="Logo empresa"></td> 
<?php $fila['id'];?> 
<td><?php echo $fila['empresa'];?></td>
<td><?php echo $fila['puesto'];?></td>
<td><?php echo $fila['jornada'];?></td>
<td><?php echo $fila['salario'];?></td>
<td><?php echo $fila['zona'];?></td>
<td>
    <div class="popup-flex">
        <button id="popup-btn">Click Me</button>
    </div>

    <div id="popup-wrapper" class="popup-container">
        <div class="popup-content">
            <span id="close">amp;times;</span>
            <p class="observaciones"><?php echo $fila['observaciones'];?></p>
        </div>
    </div>
</td>

Комментарии:

1. не используйте ID атрибуты — они должны быть уникальными. Используйте event и event.target для идентификации любых элементов, которые вызывают popup и используйте это для создания всплывающего окна. Если вы можете добавить часть отрисованного кода ( т. Е. представление исходного кода ) таблицы — не обязательно весь — будет легче проиллюстрировать суть

2. Из event.target вы можете перемещаться по DOM, используя селекторы родителей/детей/братьев и сестер ( в зависимости от того, куда вам нужно перейти ) — когда вы найдете соответствующий popup-wrapper элемент, откройте всплывающее окно

Ответ №1:

пробовать

 <button id="<?= $fila['id'];?> " class="popup-btn">Click Me</button>

jquery

 $('.popup-btn').on('click', function(e){
    e.preventDefault()
    let id = $(this).attr('id')
    //do magic
})

Ответ №2:

Используя ванильный Javascript, вы можете попробовать сделать вот так. Удалите атрибуты идентификатора или преобразуйте dataset их в такие версии, как data-id="popup-wrapper" вместо id="popup-wrapper" , и используйте click событие, вызванное кнопкой, чтобы найти этот элемент в дереве DOM. С этого момента вы можете перемещаться up по дереву DOM и еще раз запрашивать, чтобы найти всплывающее окно. Как только вы определили всплывающее окно — откройте его или сделайте что-нибудь.. здесь я просто переключаю имя класса.

Все приведенные ниже теги PHP были удалены просто для облегчения работы с фрагментом/демонстрацией…

 const clickhandler=function(e){
  let popup=this.parentNode.parentNode.querySelector('[data-id="popup-wrapper"]');
      popup.classList.toggle('popped');
      /* Open the popup... sing and dance! */
};


document.querySelectorAll('.popup-flex > [data-id="popup-btn"]').forEach( bttn=>bttn.addEventListener('click',clickhandler)) 
 .popped{border:2px solid red;}
td{border:1px solid grey} 
 <table>
        <tr>
            <td><img src="//placekitten.com/100/100" class="logoempresa" alt="Logo empresa"></td> 
            <td>$fila['empresa']</td>
            <td>$fila['puesto']</td>
            <td>$fila['jornada']</td>
            <td>$fila['salario']</td>
            <td>$fila['zona']</td>
            <td>
                <div class="popup-flex">
                    <button data-id="popup-btn">Click Me</button>
                </div>

                <div data-id="popup-wrapper" class="popup-container">
                    <div class="popup-content">
                        <span data-id="close">amp;times;</span>
                        <p class="observaciones">$fila['observaciones']</p>
                    </div>
                </div>
            </td>
        </tr>
        
        <tr>
            <td><img src="//placekitten.com/100/100" class="logoempresa" alt="Logo empresa"></td> 
            <td>$fila['empresa']</td>
            <td>$fila['puesto']</td>
            <td>$fila['jornada']</td>
            <td>$fila['salario']</td>
            <td>$fila['zona']</td>
            <td>
                <div class="popup-flex">
                    <button data-id="popup-btn">Click Me</button>
                </div>

                <div data-id="popup-wrapper" class="popup-container">
                    <div class="popup-content">
                        <span data-id="close">amp;times;</span>
                        <p class="observaciones">$fila['observaciones']</p>
                    </div>
                </div>
            </td>
        </tr>
        
        <tr>
            <td><img src="//placekitten.com/100/100" class="logoempresa" alt="Logo empresa"></td> 
            <td>$fila['empresa']</td>
            <td>$fila['puesto']</td>
            <td>$fila['jornada']</td>
            <td>$fila['salario']</td>
            <td>$fila['zona']</td>
            <td>
                <div class="popup-flex">
                    <button data-id="popup-btn">Click Me</button>
                </div>

                <div data-id="popup-wrapper" class="popup-container">
                    <div class="popup-content">
                        <span data-id="close">amp;times;</span>
                        <p class="observaciones">$fila['observaciones']</p>
                    </div>
                </div>
            </td>
        </tr>
    </table>
Метки: