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

L
На сайте с 11.08.2010
Offline
38
1490

Здравствуйте. Есть гугловская форма, она интегрирована на страницу сайта (через html), хочется чтобы после нажатия на копку отправить открывалось модальное окно. Посоветуйте как лучше реализовать это?

Sveta Prokopeva
На сайте с 10.05.2006
Offline
99
#1

Можно сделать это через jQuery если это то что вам нужно. Если нет расскажи поподробней о задаче.

$('#button_selector').on('click', function () {

window.open('http://site.com');
});
izbushka
На сайте с 08.06.2007
Offline
110
#2

jQuery dialog

Sveta Prokopeva, ваш пример откроет окно, но не модальное

Sveta Prokopeva
На сайте с 10.05.2006
Offline
99
#3

izbushka, аа, точно! Вон какое модальное окно имелось в виду.

Lautes, тогда да, jQuery dialog то что вам нужно.

L
На сайте с 11.08.2010
Offline
38
#4

Сложность в том что в примерах данного скрипта он привязывается либо на кнопку либо на див. В гугл форме кнопка отправки сделана на input и выглядит типа так:

<input type="image" src="http://site.ru/images/stories/elements/image.png" name="submit" value="нажать" id="ss-submit">

И также для того, чтобы форма после нажатия не отправляла на страницу Гугла (спасибо за то что заполнили форму), есть скрипт который позволяет подставить свою thanks 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.ru/forms/d/1BFZBtUHQoUIteKb5cvu5Za2jIBxqu4EUes7p6rfxkG7M" method="post"
target="hidden_iframe" onsubmit="submitted=true;">

К сожалению я не знаю как можно было бы реализовать модальное окно, если б там было бы ссылка на которую можно было бы навесить скрипт, это было бы намного проще.

Braindbrigada
На сайте с 10.01.2010
Offline
84
#5

Как вариант:

<div id="moydiv">Гугловская форма</div>

Событие на:

$("#moydiv input").click(function(){тут код модального окна});

или даже так :)

$("#ss-submit").click(function(){тут код модального окна});
L
На сайте с 11.08.2010
Offline
38
#6

Braindbrigada, код модального окна в смысле его html структура?

Braindbrigada
На сайте с 10.01.2010
Offline
84
#7
Lautes:
Braindbrigada, код модального окна в смысле его html структура?

Можно и так сказать...

То, что должно выполнятся по клику #ss-submit, что будет у вас это вам решать...

В окно может быть спрятано css или добавляться в код - после нажатия.

L
На сайте с 11.08.2010
Offline
38
#8

Braindbrigada, просто я вставил эту строчку, я так понял в теории окно должно было открыться пустое или оно так не работает?

Braindbrigada
На сайте с 10.01.2010
Offline
84
#9
Lautes:
Braindbrigada, просто я вставил эту строчку, я так понял в теории окно должно было открыться пустое или оно так не работает?

Нет окно это отдельный код.

Сложность в том что в примерах данного скрипта он привязывается либо на кнопку либо на див. В гугл форме кнопка отправки сделана на input и выглядит типа так:

Вот я и написал как обработать событие клик

Вставьте это

$("#ss-submit").click(function(){alert("В место меня нужен код модального окна!");});  
L
На сайте с 11.08.2010
Offline
38
#10

Braindbrigada,

Вставьте это

Вставил, выполняется переход на thankspage как раньше.

Это надо отдельным скриптом вставлять?

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий