Модальное окно на input - JavaScript, Ajax

Lau · 23.09.2013, 18:26

Здравствуйте.

Возможно ли скрипт модального окна повесить на кнопку input? Например типа:

<input type="image" src="http://site.ru/images/stories/elements/button_send.png" name="submit" value="Готово" id="ss-submit">

Это кнопка из гугл формы, которая интегрирована на странице сайта. Заранее благодарю за ответ.

pompiduskus · 24.09.2013, 15:22

Привет. Что значит повесит на кнопку ? что бы по клику на кнопку вылетало модальное окно ?

если да то вот так

Код:

<element onclick="showModalWindow()" id="myInput"></element>

или так

Код:

<input onclick="showModalWindow()" id="myInput" />

или так

Код:

<img src="img.png" onclick="showModalWindow()" id="myInput" />

Lau · 25.09.2013, 12:53

pompiduskus да хочу чтобы при нажатие на input открывалось модальное окно.

Раньше я делал проще, так как у меня стоит джумла я просто использовал специальный плагин, задача решалась добавлением к ссылке: class="jcepopup" и data-mediabox="width[700];height[500]"

Я подумал возможно просто можно модифицировать плагин mediabox jce, чтобы можно было и навесить на input?

pompiduskus · 25.09.2013, 15:13

Я не спец, и не знаю как правильно делать такие вещи, а делаю я вот примерно так. В зависимости от того что нужно.

Код HTML:

<html>
<head>
<title>window</title>
<style type="text/css">
#prozrachniyFon{
    position: absolute; background-color: #C6C6C6;
    opacity: 0.7; min-width: 100%; min-height: 100%;
    display: none; padding-top: 50px;
}


#modalWindow{
    width: 300px; height: 200px; padding: 35px;
    margin: 0 auto; background-color: #000;
    color: #fff; display: none;
}
</style>
<script type="text/javascript">
function openModalWindow(){
   document.getElementById("prozrachniyFon").style.display = 'block';
   document.getElementById("modalWindow").style.display = 'block';
}

function closeModalWindow(){
   document.getElementById("prozrachniyFon").style.display = 'none';
   document.getElementById("modalWindow").style.display = 'none';
}

</script>
</head>

<body>
<div id="prozrachniyFon" onclick="closeModalWindow()">
	<div id="modalWindow">Modalnoye okno</div>
</div>



<div>
<a onclick="openModalWindow()">Open window<!--Открыть модальное окно--></a>
site content
</div>

</body>
</html>

=================================== =====
Вообщем тут в основном CSS

вот нормальным пример http://ruseller.com/lessons/les1556/demo/index.html

Lau · 26.09.2013, 12:10

Полностью использовал Ваш код, за исключением того что событие повесил на input. Однако всё равно не сработало. В Гугл форме ещё хитро отсылаются данные:

Код:

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='http://YOUR-THANK-YOU-PAGE-URL';}"></iframe>
<form action="https://docs.google.com/a/site.org/forms/d/1AFZBtUHroUIteKb6cvu5Xa2jIGxqu4EUs7p6rfxkG7N/formResponse" method="post"
target="hidden_iframe" onsubmit="submitted=true;">

Lau · 26.09.2013, 12:17

А нет прощу прощения, модальное окно действительно открывается, но нужно ещё в него каким-то образом интегрировать открываемые данные)

Naive · 26.09.2013, 21:43

Цитата:

Модальное окно на input

Мне почему-то оно представилось так (jsfiddle)...

этеншн! не пытайтесь повторить это дома!

pompiduskus · 27.09.2013, 04:58

document.getElementById("modalWindo w").innerHTML = 'Тут так инфа которую нужно вывести в окне';

<div id="modalWindow">Modalnoye okno</div>

=========================
По ссылке выше..

"Йа модальное окошечко =)"

23.09.2013, 18:26	#1
Lau Пользователь Регистрация: 04.08.2010 Сообщений: 28	Модальное окно на input Здравствуйте. Возможно ли скрипт модального окна повесить на кнопку input? Например типа: <input type="image" src="http://site.ru/images/stories/elements/button_send.png" name="submit" value="Готово" id="ss-submit"> Это кнопка из гугл формы, которая интегрирована на странице сайта. Заранее благодарю за ответ.

24.09.2013, 15:22	#2
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	Привет. Что значит повесит на кнопку ? что бы по клику на кнопку вылетало модальное окно ? если да то вот так Код: `<element onclick="showModalWindow()" id="myInput"></element>` или так Код: `<input onclick="showModalWindow()" id="myInput" />` или так Код: `<img src="img.png" onclick="showModalWindow()" id="myInput" />` <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

27.09.2013, 04:58	#8
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	document.getElementById("modalWindo w").innerHTML = 'Тут так инфа которую нужно вывести в окне'; <div id="modalWindow">Modalnoye okno</div> ========================= По ссылке выше.. "Йа модальное окошечко =)" <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Модальное окно	PR0Z0N	Фриланс	1	31.10.2012 19:09
Модальное окно	Sprat	PHP	3	28.03.2012 16:04
Модальное окно	adm2010	Общие вопросы Delphi	2	28.09.2011 22:21
Модальное окно из Dll	neo1109	Общие вопросы Delphi	0	29.06.2007 11:24

25.09.2013, 12:53	#3
Lau Пользователь Регистрация: 04.08.2010 Сообщений: 28	pompiduskus да хочу чтобы при нажатие на input открывалось модальное окно. Раньше я делал проще, так как у меня стоит джумла я просто использовал специальный плагин, задача решалась добавлением к ссылке: class="jcepopup" и data-mediabox="width[700];height[500]" Я подумал возможно просто можно модифицировать плагин mediabox jce, чтобы можно было и навесить на input?

26.09.2013, 12:17	#6
Lau Пользователь Регистрация: 04.08.2010 Сообщений: 28	А нет прощу прощения, модальное окно действительно открывается, но нужно ещё в него каким-то образом интегрировать открываемые данные)