Всем здравствуйте!
Есть такая задача: из модального окна нужно передать значение в input. Имеется решение, которое работает великолепно:
/* index.php */
<script language="JavaScript">
function changeBut(nam) {
document.forms[0].form_color.value = nam;
}
</script>
<div class="container">
<form>
<input type=text name=form_color onClick='window.open("popup.php", "modal", "width=500, height=100");'>
</form>
</div>
/* popup.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'ах. Есть такой нерабочий вариант:
<script language="JavaScript">
function changeBut(nam) {
document.forms[0].form_color.value = nam;
}
</script>
<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>
При нажатии на любой цвет модальное окно успешно закрывается, но этого недостаточно. Прошу уважаемое сообщество особо тапками не кидаться, но действительно что-то никак не соображу куда нужно «повесить»
value с соответствующим названием цвета и каким образом сие значение передать в
input. Понимаю, что это не особо сложно, подскажите пожалуйста. Ну вот упёрся в тупик и – никак...
