Как передать переменную в модальное окно?

Question

[Макс Darkleviathan]

Собственно сам код:

while($zx=$q->fetcharray()) 
{
print"
<div style=flex:1;text-align:center;width:350px;margin-top:20px;>
<div style=width:350px;height:230px;display:inline-block;overflow:hidden;>
<img onclick='func();' src=$zx[1] style=width:350px; class=ft>
</div>
</div>
";
}
print "<div class='modal' style='display:none;'>
$zx[1]
</div>";

и скрипт:

function func(){
$('.modal').css('display','block');
$('.modal').css('z-index','100500');
$('.modal').css('position','fixed');
$('.modal').css('top','0');
$('.modal').css('width','100%');
}

$zx[1] - это ссылка на картинку.
При отработке onclick появляется модальное окно.
Собственно необходимо передавать эту самую картинку в модальное окно.
Есть еще также $zx[0] - это id, как вариант можно передавать и этот параметр а потом уже через select получать значение.
Как передать эту самую переменную?

Answer 1

[Юрий Кулаксыз]

Так а в чём проблема, передавайте в модальное окно <img src=$zx[1]>
Ну или в сам див модельного окна background-image

Comments

[Макс Darkleviathan]

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

[Юрий Кулаксыз]

Макс Darkleviathan, Тогда 2 варианта либо создавать в цикле модальные окна для каждого изображения и открывать их не по имени класса, а по id, а в onclick передавать тот самый id.
Или второй вариант в цикле в onclick параметром в функцию записывать $zx[1] и в самой функции помимо манипуляций с модальным окном дописать

function func(path){
$('.modal').css('display','block');
$('.modal').css('z-index','100500');
$('.modal').css('position','fixed');
$('.modal').css('top','0');
$('.modal').css('width','100%');
$('.modal').append(<img src=path>)
}

[Макс Darkleviathan]

Юрий Кулаксыз,
То есть если следовать вторым путем, то нужно так?

<img onclick='func($zx[1]);' src=$zx[1] style=width:350px; class=ft>

а в скрипт тогда ваш вариант

function func(path){
$('.modal').css('display','block');
$('.modal').css('z-index','100500');
$('.modal').css('position','fixed');
$('.modal').css('top','0');
$('.modal').css('width','100%');
$('.modal').append(<img src=path>)
}

[Юрий Кулаксыз]

Макс Darkleviathan, да, всё верно, почитайте про append, возможно где-то ошибся с синтаксисом.

[Макс Darkleviathan]

Юрий Кулаксыз,
ошибка была но незначительная.
Написал так:

<img onclick='func($zx[0]);' src=$zx[1] style=width:350px; class=ft>

function func(path){
$('.modal').css('display','block');
$('.modal').css('z-index','100500');
$('.modal').css('position','fixed');
$('.modal').css('top','0');
$('.modal').css('width','100%');
$('.modal').append('<a>path</a>')
}

и это вывело в итоге мне path. Скорее всего вывело просто как текст

[Юрий Кулаксыз]

Так а зачем вы записываете параметр функции просто в ссылку, его нужно в тег img и в src записывать. Как я понял, вам нужно при нажатии на миниатюру, чтобы появлялась увеличенная версия картинки?
И ещё лучше $zx[1] лучше передавать, а не просто id

[Макс Darkleviathan]

Юрий Кулаксыз, Именно этого я и хочу добиться. Да я пытался передавать ссылку. Почему-то ее не хочет выводить. Вот с id другое дело, его как раз передает.

<img onclick='func($zx[0]);' src=$zx[1] style=width:350px; class=ft>

function func(path){
var asd=path;
$('.modal').css('display','block');
$('.modal').css('z-index','100500');
$('.modal').css('position','fixed');
$('.modal').css('top','0');
$('.modal').css('width','100%');
$('.modal').append(asd)
}

Например если $zx[0]=1 выводит как нужно. Но стоит написать так:

<img onclick='func($zx[1]);' src=$zx[1] style=width:350px; class=ft>

function func(path){
var asd=path;
$('.modal').css('display','block');
$('.modal').css('z-index','100500');
$('.modal').css('position','fixed');
$('.modal').css('top','0');
$('.modal').css('width','100%');
$('.modal').append(<img src=asd>)
}

В этом случае скрипт не отрабатывает. Я предполагаю что из-за того что переменная это ссылка.Но я могу и ошибаться.

[Юрий Кулаксыз]

Макс Darkleviathan, а что в консоли пишет, если передавать $zx[1]?
И попробуйте поставить двойные ковычки в аттрибут src ="path"

[vasiiil]

Если я правильно понял функционал: выводится список картинок, при нажатии на которые должно открываться модальное окно с этой же картинкой (типа увеличенный просмотр). то через append заведомо неверное решение, потому что:
1) вы кликаете на картинку1, открывается окно, в него вставляется картинка1
2) вы закрываете модальное окно, кликаете на картинку2, открывается модальное окно, в него вставляется картинка2, но и картинка1 там тоже осталась от предыдущего вызова.

Возможное решение: в разметку модального окна сразу вставить тег img, в функцию передавать путь к картинке и подставлять его в атрибут src:

function func(path){
    var asd=path;
    $('.modal').css({
        display: 'block',
        'z-index': 100500,
        position: 'fixed',
        top: 0,
        width: '100%'
    });
    $('<img_selector>').attr('src', path);
}

php:

while($zx=$q->fetcharray()) {
    print "
        <div style=flex:1;text-align:center;width:350px;margin-top:20px;>
            <div style=width:350px;height:230px;display:inline-block;overflow:hidden;>
                <img onclick=\"func('$zx[1]');\" src=$zx[1] style=width:350px; class=ft>
            </div>
        </div>
    ";
}
print "<div class='modal' style='display:none;'>
$zx[1]
</div>";