Всем здравствуйте! Есть такая задача: из модального окна нужно передать значение в input. Имеется решение, которое работает великолепно: /* index.php */ Код (Javascript): <script language="JavaScript"> function changeBut(nam) { document.forms[0].form_color.value = nam; } </script> PHP: <div class="container"> <form> <input type=text name=form_color onClick='window.open("popup.php", "modal", "width=500, height=100");'> </form> </div> /* popup.php */ PHP: <html> <body> <form name=modal_color> <center> <table border=2 cellspacing=5 width=75%> <tr width=35px height=35px> <td bgcolor=#ff0000><img src=clear.png width=100% height=100% onClick="window.opener.changeBut(document.modal_color.value='Красный'); self.close();" title="Красный"></td> <td bgcolor=#ff9b00><img src=clear.png width=100% height=100% onClick="window.opener.changeBut(document.modal_color.value='Оранжевый'); self.close();" title="Оранжевый"></td> <td bgcolor=#fff000><img src=clear.png width=100% height=100% onClick="window.opener.changeBut(document.modal_color.value='Жёлтый'); self.close();" title="Жёлтый"></td> <td bgcolor=#32af00><img src=clear.png width=100% height=100% onClick="window.opener.changeBut(document.modal_color.value='Зелёный'); self.close();" title="Зелёный"></td> <td bgcolor=#00b4ff><img src=clear.png width=100% height=100% onClick="window.opener.changeBut(document.modal_color.value='Голубой'); self.close();" title="Голубой"></td> <td bgcolor=#0064ff><img src=clear.png width=100% height=100% onClick="window.opener.changeBut(document.modal_color.value='Синий'); self.close();" title="Синий"></td> <td bgcolor=#a200ff><img src=clear.png width=100% height=100% onClick="window.opener.changeBut(document.modal_color.value='Фиолетовый'); self.close();" title="Фиолетовый"></td> </tr> </table> </center> </form> </body> </html> Всё бы ничего, да только есть одно НО – модальное окно открывается в браузере как второе Windows-окно отдельным файлом . Необходимо сделать практически то же самое, но чтобы модальное окно реализовывалось одним файлом на DIV'ах. Есть такой нерабочий вариант: Код (Javascript): <script language="JavaScript"> function changeBut(nam) { document.forms[0].form_color.value = nam; } </script> PHP: <div class="container"> <form> <input type="text" name="form_color" onClick="getElementById('win').removeAttribute('style');" value="" /> <div id="win" style="display: none;"> <div class="visible"> <div class="content"> <center> <table border=2 cellspacing=5 width=75%> <tr width=25px height=25px> <td bgcolor=#ff0000><img src=clear.png width=100% height=100% onClick="getElementById('win').style.display='none';" title="Красный"></td> <td bgcolor=#ff9b00><img src=clear.png width=100% height=100% onClick="getElementById('win').style.display='none';" title="Оранжевый"></td> <td bgcolor=#fff000><img src=clear.png width=100% height=100% onClick="getElementById('win').style.display='none';" title="Жёлтый"></td> <td bgcolor=#32af00><img src=clear.png width=100% height=100% onClick="getElementById('win').style.display='none';" title="Зелёный"></td> <td bgcolor=#00b4ff><img src=clear.png width=100% height=100% onClick="getElementById('win').style.display='none';" title="Голубой"></td> <td bgcolor=#0064ff><img src=clear.png width=100% height=100% onClick="getElementById('win').style.display='none';" title="Синий"></td> <td bgcolor=#a200ff><img src=clear.png width=100% height=100% onClick="getElementById('win').style.display='none';" title="Фиолетовый"></td> </tr> </table> </center> </div> </div> </div> </form> </div> При клике на input модальное окно открывается и при нажатии на любой цвет оно успешно закрывается, однако этого недостаточно. Прошу уважаемое сообщество особо тапками не кидаться, но действительно что-то никак не соображу куда нужно «повесить» value с соответствующим названием цвета, чтобы каким-то образом сие значение передавалось в input. Понимаю, что это не особо сложно, ну вот упёрся в тупик и – никак... Подскажите, пожалуйста. Заранее всем ответившим СПАСИБО !!!
Создаешь div с position:absolute; выставляешь куда надо, наполняешь контентом и прописываешь ему класс (например class="disp"). В css прописываешь этому классу display:none; И при клике куда надо удаляешь этот класс. В верхний правый угол буковку "X" (типа закрыть) И при клике по "Х" этот класс добавляешь. При выборе чего-то там в этом DIV аналогично, класс удаляешь и получаешь нужное тебе значение и вставляешь куда надо. Если что-то непонятно - спрашивай.
TeslaFeo, благодарю за ответ! Честно говоря, он мне понятен и непонятен одновременно. С момента публикации своего сообщения я не сидел сложа руки в ожидании готового решения, а неистово гуглил Интернет. Кое-что раскопал, сейчас вкупе с твоим ответом буду кумекать дальше. О результатах отпишусь позже.
В принципе, решение уже найдено давно, не было времени здесь отписаться. Итак, моё модальное окно представлено на иллюстрации ниже. Вместо буковки Х в углу (типа закрыть) я сделал кнопку Отмена. Принцип тот-же – попросту закрывает модальное окно без внесения какого-либо значения в input. При клике на любой цветной квадратик модальное окно также автоматически скрывается и в input заносится название соответствующего цвета. Как раз то, что мне и требовалось! Реализовано сие действие следующим образом: Код (Javascript): <script language="JavaScript"> function changeBut(nam) { document.forms[0].form_color.value = nam; } function innerHTML(newTXT){ var elem = document.getElementById("form_color"); elem = newTXT; } </script> PHP: <li><img src=images/color_blue.png onClick="getElementById('win').style.display='none'; document.getElementById('form_color').value = 'Синий';" title="Синий"></li> По другим цветам всё аналогично и нет смысла их все тут публиковать. Табличную вёрстку заменил на список. В остальном PHP-листинг остался прежним и его можно посмотреть в моём первом сообщении. Вероятно, есть более лаконичный код, который бы одновременно и закрывал (скрывал) модальное окно, и вносил в input значение (название) выбранного цвета. Буду рад консультациям опытных коллег.
Прописанные цвета будут быстрее грузиться, чем картинки для каждого цвета. Посему будет лучше прописать бакграунд каждому квадратику --- Добавлено --- и градиенты тоже возможно сделать, и полосатые эти бакграунды тоже... --- Добавлено --- Вот тут мега подробно о градиентах.
TeslaFeo, спасибо за ссылку – сохранил её себе, обязательно буду штудировать материал и применять новые знания в своём сайте. Действительно, поначалу у меня цвета были представлены как бакграунды, но впоследствии перешёл на картинки из-за последней колонки в модальном окне.
Мне это интересно, обязательно буду экспериментировать. О результатах отпишусь позже. И – ещё раз Вам СПАСИБО за указание более правильного пути в веб-программировании.