Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Модальное окно на input (https://javascript.ru/forum/misc/41636-modalnoe-okno-na-input.html)

lautes 23.09.2013 12:04

Модальное окно на input
 
Здравствуйте.

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

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

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

vashurin 23.09.2013 14:23

Цитата:

Сообщение от lautes (Сообщение 273287)
Здравствуйте.

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

Возможно. :)

lautes 23.09.2013 18:25

А могли бы подсказать, я к сожалению не очень компетентен в этом вопросе. Я встречал множество плагинов модальных окон, но они (по крайне мере так это выглядело в примере), вешались на ссылку, то есть <a>

Erolast 24.09.2013 18:53

Конечно же возможно. Событие можно повесить на любой элемент, так что любой плагин модальных окон должен это уметь, если не умеет - уж очень дурной плагин). Надо все то же самое, что применено в примере к тегу <a>, применить к тегу <input>.

lautes 25.09.2013 13:05

Например я взял популярный (вроде как) плагин fancybox, смотрю примеры применения и не где не могу найти что нужен прописать внутри onclick конкретно для данного плагина http://fancybox.net/howto.

Понимаю что мои вопросы из разряда не очень умных)

рони 25.09.2013 14:45

lautes,
:-?
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
  <script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script type='text/javascript'>
 $(function()
 		{
 				$('input').fancybox({href: 'http://javascript.ru/forum/images/smilies/smile.gif'})
 		}
 );
</script>
</head>
<body>
<input type="image" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" name="submit" value="Готово" id="ss-submit">
</body>
</html>

lautes 26.09.2013 12:34

А в случае если мне надо в модальном окне загружать iframe, и не простой, в гул форме он реализован так (чтобы подменять стандартную thnaks page на свою):

<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/1AFZBtUHQoUIteKb5cvu5Xa2jIGxqu3213s7p6rfxkG7M/formResponse" method="post"
target="hidden_iframe" onsubmit="submitted=true;">

рони 26.09.2013 13:21

lautes,
читайте документацию либо обратитесь в раздел работа

mehnich 18.02.2014 14:40

Мне помогло такое решение
 
Заменил {window.location='http://YOUR-THANK-YOU-PAGE-URL';}' На $('.example-div').fancybox().trigger('click'); В свою очередь в example-div может быть что угодно)


Часовой пояс GMT +3, время: 17:38.