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

@Russo_Turisto · Регистрация: 26.11.2013

Студворк — интернет-сервис помощи студентам

Есть цикл перебора и вывода массива в таблице

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
foreach($array as $value){
echo"<tr>";
        echo "<td>";
            echo $value['name'];
        echo "</td>";
        echo "<td>";
            echo $value['num'];
        echo "</td>";
                echo "<td>";
            echo $value['color'];
        echo "</td>";
                echo "<td>";
                        echo "<a href='#modal' class='open_modal'>Открыть окно</a>";
        echo "</td>";
echo"</tr>";
}

еще на странице присутствует html код самого модального окна

HTML5
1
2
3
4
<div id="modal" class="modal_div"> <!-- скрытый див с уникальным id = modal1 -->
    <span class="modal_close">X</span>
         тут содержимое окна...
</div>

и ещё на странице присутствует js код, в котором я вообще ничего не понимаю...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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>

@prudkiy · 09.12.2014, 00:27

т.е. я так понимаю выполнить скрипт php по нажатию по кнопке?

@Russo_Turisto · 09.12.2014, 00:31 **[ТС]**

Нет, нужно передать переменную в модальное окно, как показано выше и уже там работать с этой переменной дальше.

@prudkiy · 09.12.2014, 00:52

ага, то вам нужно было идти в раздел js.
все писать нужно здесь

JavaScript
1
2
3
4
5
6
7
8
9
10
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); // плавно показываем
         });
     });

т.к. она отвечает за открытие модального

Добавлено через 3 минуты
а так то - модифицируем вывод таблицы

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$i = 0;
foreach($array as $value){
echo"<tr class='this_$i'>";
        echo "<td class='name'>";
            echo $value['name'];
        echo "</td>";
        echo "<td class='num'>";
            echo $value['num'];
        echo "</td>";
                echo "<td  class='color'>";
            echo $value['color'];
        echo "</td>";
                echo "<td>";
                        echo "<a href='#modal' id='this_$i' class='open_modal'>Открыть окно</a>";
        echo "</td>";
echo"</tr>";
$i++;
}

Добавлено через 2 минуты
html

HTML5
1
2
3
4
<div id="modal" class="modal_div"> <!-- скрытый див с уникальным id = modal1 -->
    <span class="modal_close">X</span>
         <p>тут содержимое окна...</p>
</div>

@Russo_Turisto · 09.12.2014, 00:54 **[ТС]**

блин, с помощью php не решить проблему? тогда просьба к модераторам перенести тему в нужный раздел

@prudkiy · 09.12.2014, 01:09

ииииии - js....

Добавлено через 7 минут

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
open_modal.click( function(event){ // ловим клик по ссылке с классом open_modal
 
var thisClass = $(this).attr('id'); // узнаем id кнопки
/*делаем выборку с таблицы с названием класса которое совпадает с нашим id*/
var name = $('.'+thisClass+' .name').html();
var num = $('.'+thisClass+' .num').html();
var color = $('.'+thisClass+' .color').html();
 
$('#modal p').html(name+' || '+num+' || '+color); // генерируем содержимое окна
 
 
         event.preventDefault(); // вырубаем стандартное поведение
         var div = $(this).attr('href'); // возьмем строку с селектором у кликнутой ссылки
         overlay.fadeIn(400, //показываем оверлэй
             function(){ // после окончания показывания оверлэя
                 $(div) // берем строку с селектором и делаем из нее jquery объект
                     .css('display', 'block') 
                     .animate({opacity: 1, top: '50%'}, 200); // плавно показываем
         });
     });

Добавлено через 5 минут
вот вроде так, надеюсь помог ) Говорите

@Lazy_Den · 09.12.2014, 01:29

Сообщение от prudkiy

ииииии - js....

Вызывали?

prudkiy, Классы или id в данной ситуации лишние. Отобрать нужные элементы можно отталкиваясь от их общего с кнопкой "родителя". А так, на первый взгляд, нормально ))

Добавлено через 13 минут
Russo_Turisto, вы тайно влюбленный в конструкцию echo?

А что, если ваш код записать вот так:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
<?php
foreach($array as $value){
    ?>
    <tr>
      <td><?=$value['name']?></td>
      <td><?=$value['num']?></td>
      <td><?=$value['color']?></td>
      <td><a href="#modal" class="open_modal">Открыть окно</a></td>
    </tr>
    <?php
}
?>

@Russo_Turisto · 09.12.2014, 01:37 **[ТС]**

Lazy_Den, нет я просто новичёк, поэтому так коряво пишу

Вот это в точку! то что мне нужно

Отобрать нужные элементы можно отталкиваясь от их общего с кнопкой "родителя"

пока результат нулевой

тыкните носом пожалуйста, хотябы на нужную статью!

@prudkiy · 09.12.2014, 01:47

Lazy_Den , согласен, просто по быстрому без заморочек склепал

@Lazy_Den · 09.12.2014, 01:48

Russo_Turisto, судя по вопросу, вам нужно только значение первой ячейки (name). Если да, то так:

JavaScript
1
2
3
4
5
open_modal.on('click', function(e){ 
    var name = $(this).closest('tr').find('td:first').text(); // ваше значение, добавляйте куда хотите
    /* .... */
    
}

@Russo_Turisto · 09.12.2014, 02:06 **[ТС]**

Lazy_Den, вставил ваш код, переменная $name выводит в окне путь к файлу - modules/test.php. Дело в том, что я представил только часть кода как пример там в цикле у меня много ключей и значений, и нужны почти все. Ну даже если вытянуть одно id можно уже в окне из базы сделать выборку, но увы, и этого я сделать не смог(

@Lazy_Den · 09.12.2014, 02:12

Сообщение от Russo_Turisto

Дело в том, что я представил только часть кода

Мне и JS (тем более) всё равно сколько у вас там чего. Хоть тонны информации. Вопрос только в том, как оптимально её выбрать. Но для этого, как минимум, нужно знать реальную структуру строки (tr). Будем знать - выберем всё подчистую и ещё бабушку с дедушкой прихватим

@Russo_Turisto · 09.12.2014, 10:13 **[ТС]**

структуру строки tr я привел правильно -

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
echo"<tr>";
        echo "<td>";
            echo $value['name'];
        echo "</td>";
        echo "<td>";
            echo $value['num'];
        echo "</td>";
                echo "<td>";
            echo $value['color'];
        echo "</td>";
                echo "<td>";
                        echo "<a href='#modal' class='open_modal'>Открыть окно</a>";
        echo "</td>";
echo"</tr>";

ваш код я вставил вот-так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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 name = $(this).closest('tr').find('td:first').text(); // ваше значение, добавляйте куда хотите
    /* .... */
         var div = $(this).attr('action'); // возьмем строку с селектором у кликнутой ссылки
         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>

@Lazy_Den · 09.12.2014, 11:50

Russo_Turisto, сейчас не было особо времени наводит красоту, поэтому сделал вам пример на очень скорую руку того, как можно всё организовать. Как увидите, не нужно плодить какую-то кучу модальных окон, а используем одно на все случаи ~~жизни~~ сайта. Суть в JS, а облагородить стилями, я думаю. что у вас получится самому.

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<table>
    <tr>
        <td>Петя</td>
        <td>10</td>
        <td>Зелёный</td>
        <td><a href="" class="open_modal">Открыть окно</a>
        </td>
    </tr>
    <tr>
        <td>Коля</td>
        <td>20</td>
        <td>Красный</td>
        <td><a href="" class="open_modal">Открыть окно</a>
        </td>
    </tr>
    <tr>
        <td>Вася</td>
        <td>100500</td>
        <td>Синий</td>
        <td><a href="" class="open_modal">Открыть окно</a>
        </td>
    </tr>
</table>
<div id="overlay"></div>
<div id="modal_wrapper">
    <div id="modal"> <span id="close_modal">Х</span>
 
        <div></div>
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
table {
    border-collapse: collapse;
}
td {
    padding: 10px;
    border: 1px solid #999;
}
#overlay {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 998;
}
#modal_wrapper {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 999;
}
#modal_wrapper:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.36em;
}
#modal {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    min-width: 100px;
    min-height: 100px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 5px 10px rgba(0, 0, 0, .3);
    background: #fff;
}
#close_modal {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: -15px;
    margin-right: -15px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-family: Verdana;
    font-size: 1.5em;
    color: #5f5f5f;
    text-align: center;
    border: 3px solid #5f5f5f;
    border-radius: 50%;
    background: inherit;
    box-shadow: 1px -1px 3px 1px rgba(0, 0, 0, .3);
    cursor: pointer;
}
#modal > div {
    padding: 5px;
    font-size: 1.5em;
    text-align: left;
    background: inherit;
}
#modal > div li span {
    font-style: italic;
    color: #900;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var overlay = $('#overlay'),
    modalWrap = $('#modal_wrapper'),
    modal = $('#modal > div'),
    modalClose = $('#close_modal'),
    showModal = $('.open_modal'),
    contData = ['Имя: ', 'Число: ', 'Цвет: '];
 
showModal.on('click', function (e) {
    e.preventDefault();
    var li = $(this).closest('tr').find('td:not(:last-child)')
        .map(function (i, td) {
        return '<li><span>' + contData[i] + '</span>' + $(td).text() + '</li>';
    }).get(),
        ul = $('<ul />').append(li);
    openModal(ul);
});
 
modalClose.on('click', closeModal);
 
function openModal(cont) {
    overlay.fadeIn(250);
    modal.html(cont);
    modalWrap.delay(250).fadeIn(500);
}
 
function closeModal() {
    modalWrap.fadeOut(250, function () {
        modal.text('');
    });
    overlay.delay(250).fadeOut(500);
}

@Lazy_Den · 15.02.2016, 21:34

Обновляю битую ссылку в предыдущем сообщении. Рабочий пример

@Arthur_ · 19.07.2016, 16:38

Lazy_Den, Просьба посмотреть похожу тему
Получение значений атрибутов элемента, над которым произошёл event
К сожалению, для себя так и не нашел выхода.

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение Это мой обзор планшета X220 с точки зрения школьника. Недавно я решила попытаться уменьшить свой. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@prudkiy 181 / 149 / 55 Регистрация: 21.07.2013 Сообщений: 958
	09.12.2014, 00:27
	т.е. я так понимаю выполнить скрипт php по нажатию по кнопке? 0

@Russo_Turisto 12 / 2 / 0 Регистрация: 26.11.2013 Сообщений: 22
	09.12.2014, 00:31 [ТС]
	Нет, нужно передать переменную в модальное окно, как показано выше и уже там работать с этой переменной дальше. 0

@Russo_Turisto 12 / 2 / 0 Регистрация: 26.11.2013 Сообщений: 22
	09.12.2014, 00:54 [ТС]
	блин, с помощью php не решить проблему? тогда просьба к модераторам перенести тему в нужный раздел 0

@prudkiy 181 / 149 / 55 Регистрация: 21.07.2013 Сообщений: 958
	09.12.2014, 01:47
	Lazy_Den , согласен, просто по быстрому без заморочек склепал 0

@Russo_Turisto 12 / 2 / 0 Регистрация: 26.11.2013 Сообщений: 22
	09.12.2014, 02:06 [ТС]
	Lazy_Den, вставил ваш код, переменная $name выводит в окне путь к файлу - modules/test.php. Дело в том, что я представил только часть кода как пример там в цикле у меня много ключей и значений, и нужны почти все. Ну даже если вытянуть одно id можно уже в окне из базы сделать выборку, но увы, и этого я сделать не смог( 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	15.02.2016, 21:34
	Обновляю битую ссылку в предыдущем сообщении. Рабочий пример 1

@Arthur_ 0 / 0 / 0 Регистрация: 14.07.2016 Сообщений: 6
	19.07.2016, 16:38
	Lazy_Den, Просьба посмотреть похожу тему Получение значений атрибутов элемента, над которым произошёл event К сожалению, для себя так и не нашел выхода. 0

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

Решение