Вывод модального окна по динамическому ID

246
21 мая 2018, 07:50

Имеется страница на PHP на которой сеткой отображаются изображения по пути из базы данных. Изображения хранятся в папке, а путь к изображениям хранится в базе данных MySQL. Нужно сделать модальное окно которое будет появляться при клике на изображение. Вот тут и вопрос. Как сделать так, чтобы при клике на картинку именно она открывалась в модальном окне? Ниже код вывода изображений.

<?php
$img_url = "uploads/";
    $result = mysql_query("SELECT image_name FROM images ORDER BY created DESC");
    while($row = mysql_fetch_assoc($result))
    {
    echo '
    <div class="column is-one-quarter">
        <a href="'.$img_url.$row['image_name'].'" target="_blank">
            <figure class="image image is-square">
                <img style="object-fit: cover;" src="'.$img_url.$row['image_name'].'" />
            </figure>
        </a>
    </div>
    ';
    }
    ?>
Answer 1

JS

$(".image").click(function(){
        var link = $(this).attr('src');
        $("#big_image").html('<img src="' + link + '">');
        $("#big_image").css("display", "block");
});

HTML

<div id="big_image"></div>
<div class="container">
   <img src="1.png" class="image">
   <img src="2.png" class="image">
   <img src="3.png" class="image">
</div>

CSS

#big_image{
  display:none;
  width: 100%;
  height: 100%;
  position:absolut;
  top:0;
  left:0;
}
READ ALSO
Создать окно смайлики [требует правки]
PHP

Создать окно смайлики [требует правки]

помогите создать панель смайлики с разделами на чистом jsкак в приложение

 256
Ошибка PHP в контакте с Bootstrap и AJAX
PHP

Ошибка PHP в контакте с Bootstrap и AJAX

PHP "не видит" bootstrap, выдавая ошибку

 251
метод GET в php
PHP

метод GET в php

Как методом GET получить информацию с базы данных по определенному id? то есть при клике на условно клиента номер 11 высветить всю инфу из базы...

 221
Поведение функции srt_replace()
PHP

Поведение функции srt_replace()

В документации к функции str_replace() сказано, что она возвращает либо массив либо строку http://phpnet/manual/ru/function

 228