@neoneel

Как передать значение переменной в модальное окно?

Нашел на просторах интернета вот такой велосипед и попробовал прикрутить к себе:
мой код:
$queryfnfc = mysqli_query($CONNECTfafc, 'SELECT * FROM `news` LEFT JOIN users ON news.id_user=users.id_user WHERE id_category="'.$idcat.'" ORDER BY date_news DESC');
  if ( !mysqli_num_rows($queryfnfc) ) echo '<div class="back-for-add-articles"><p>публикаций нет!</p></div>';
  while ($rowfnfc = mysqli_fetch_assoc($queryfnfc) ) {
  echo '.getPrewText(htmlspecialchars_decode($rowfnfc['text_news'])).'
<a href='#modal' class='open_modal'>Открыть окно</a>

<div id="modal" class="modal_div"> <!-- скрытый див с уникальным id = modal -->
    <span class="modal_close">X</span>
      '.htmlspecialchars_decode($rowfnfc['text_news']).'
</div>
';
}


<script>
$(document).ready(function() { // запускаем скрипт после загрузки всех элементов
    /* засунем сразу все элементы в переменные, чтобы скрипту не приходилось их каждый раз искать при кликах */
    var overlay = $('#overlay'); // подложка, должна быть одна на странице
    var open_modal = $('.open_modal'); // все ссылки, которые будут открывать окна
    var close = $('.modal_close, #overlay'); // все, что закрывает модальное окно, т.е. крестик и оверлэй-подложка
    var modal = $('.modal_div'); // все скрытые модальные окна
 
     open_modal.click( function(event){ // ловим клик по ссылке с классом open_modal
         event.preventDefault(); // вырубаем стандартное поведение
         var div = $(this).attr('href'); // возьмем строку с селектором у кликнутой ссылки
         overlay.fadeIn(400, //показываем оверлэй
             function(){ // после окончания показывания оверлэя
                 $(div) // берем строку с селектором и делаем из нее jquery объект
                     .css('display', 'block')
                     .animate({opacity: 1, top: '50%'}, 200); // плавно показываем
         });
     });
 
     close.click( function(){ // ловим клик по крестику или оверлэю
            modal // все модальные окна
             .animate({opacity: 0, top: '45%'}, 200, // плавно прячем
                 function(){ // после этого
                     $(this).css('display', 'none');
                     overlay.fadeOut(400); // прячем подложку
                 }
             );
     });
});
</script>

как передать в модальное окно содержимое $rowfnfc['text_news']?
изначально когда модальное окно не открыто, в диве modal в коде отображается нужное содержимое, при клике, открывается окно и там уже ничего нет

можно канечно передать id новости в модальное окно при клике, и ajax'ом подгрузить туда из базы новость, но это дополнительный запрос в базу куча лишенго кода, я уверен можно как-то подругом выкрутится
  • Вопрос задан
  • 2623 просмотра
Решения вопроса 1
Ifelseapps
@Ifelseapps
Frontend developer/JavaScript developer
Передайте через data-атрибут ссылки, которая открывает окно. В обработчике клика берите значение и подставлять в нужный блок окошка.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы