Всплывающее окно после нажатия на кнопку в форме
Подскажите пожалуйста, можно ли сделать всплывающее окно, после нажатия на кнопку в форме, которая на странице http://kursy05.ru/landing/obratnaya-svyaz.php? Если это возможно, то как реализовать?
|
Смотря какое модальное окно вам требуется?
скажем вызываем окно FancyBox
$("input[name='web_form_submit']").fancybox();
вызываем окно arcticModal
$("input[name='web_form_submit']").click(function(){
$('#example_box').arcticmodal();
});
просто открываем какой то DIV
$("input[name='web_form_submit']").click(function(){
$('#my_div').show();
});
Можно что и как угодно вызывать, принцип прост:
$("#element_button").click(function(){
// тут уже указываем: что вызывать, как вызывать, какие действие производить объектам
});
|
Спасибо большое. Но не получилось. Пытаюсь модальное окно вывести таким способом:
Вот сам div <div id="openModal" class="modalDialog"> <div> уууу </div> </div> Вот сам js код, который поставил перед закрывающим тегом </body>
<script>
$("input[name='web_form_submit']").click(function(){
$('#openModal').arcticmodal();
});
</script>
|
Вернее он отображает, только после этого сразу идет переход на другую страницу, которая указана в компоненте. Можно ли как-то сделать чтобы по нажатию всплывало модальное окно с кнопкой OK. И пока пользователь не нажмет "OK" чтобы не переходило?
|
На странице есть ссылка "модальное окошко" по нажатию на нее это модальное окно нормально открывается.
|
Получилось вывести arcticModal. А можно ли сделать запрет на переход страницы, пока не закрою модульное окно?
|
kolhoz,
4 строка return false в ок $('form').submit() |
это где прописать? Не совсем понял. В самой форме или в js коде?
|
kolhoz,
<script>
$("input[name='web_form_submit']").click(function(){
$('#openModal').arcticmodal();
return false;
});
</script>
|
Сделал, но теперь письмо не отправляется. Просто всплывающее окно и все.
|
Можно ли отловить нажатие на "Закрыть" в модальном окне и сделать переход?
|
Цитата:
|
kolhoz,
:(
$(".arcticmodal-close").click(function(){
$('form').submit();
});
|
kolhoz, а зачем у вас дважды подключается jQuery?
|
В шаблоне 1 раз. Второй видать битрикс сам подключает
|
В итоге у меня получилось так:
<script>
$("input[name='web_form_submit']").click(function(){
$('#exampleModal').arcticmodal();
return false;
});
$(".arcticmodal-close").click(function(){
$('form').submit();
});
</script>
Но после того как я нажимаю "Закрыть" в модальном окне, переход не осуществляется, и письмо не отправляется. А просто перезапускается страница |
>В шаблоне 1 раз. Второй видать битрикс сам подключает
Убирайте лишнее, и посмотрите что показывает отладчик. А "всплывающее" вы хотите притулить, а ведь данные формы отправляются асинхронным запросом. И отправьте пустую форму, забавное сообщение при этом получается. |
т.е. вы имеете ввиду что нельзя сделать всплывающее окно, а потом отправить данные формы?
|
Почему, сделать можно многое, но что и для чего, и как вы думали? Оно для красоты или же у него есть предназначение? А если есть, значит оно должно какой либо из операций привязано, либо до отправки формы, либо по ее результату, а значит нужно исходный имеющийся сценарий менять.
|
Идея такая. Посетитель заполняет ту форму на странице и нажимает "Отправить", после чего ему выдается во всплывающем окне "Спасибо за регистрацию!" и соц. кнопки во всплывающем окне. Есть конечно вариант сделать еще одну страницу, при переходе на которую вызывается всплывающее окно. И просто по нажатию на "Отправить" перекидывать на эту страницу. Но хотел узнать можно ли это сделать сразу по нажатию, не перекидывая никуда.
|
(function($){ // запускаем jQuery функцию
$(function(){
$("input[name='web_form_submit']").click(function(){ // при клике на "кнопку"...
$('#exampleModal').arcticmodal({ // запускаем модальное окно ArcticModal
afterClose: function(data, el) { // после закрытия окна ArcticModal
$('form[name="select_kurs"]').submit(); // отправляем данные с формы
}
});
return false; // при клике результат FALSE (лож) TRUE (истина)
});
});
}(jQuery));
|
+ УДАЛИТЕ одну из версий jQuery
строка 40 (если использовать эту версию рекомендуется поставить jQuery Migrate v1.2.1) <script src="//intechsoft.ru.js.1c-bitrix-cdn.ru/bitrix/templates/landtmpl_copy/js/jquery-2.1.3.min.js?142661334284320"></script> строка 18, если эту версию юзать - удалите выше указанный файл <script type="text/javascript" src="//intechsoft.ru.js.1c-bitrix-cdn.ru/bitrix/js/main/jquery/jquery-1.8.3.min.js?142562958593636"></script> |
В Bitrix см файл header.php там эта зараза вливает все файлы
|
Infinity178, $('form[name="select_kurs"]').submit(); // отправляем данные с формы - а ничего, что у формы уже есть обработчик отправляющий форму?
|
laimas, в исходнике он написал:
что по нажатию на "закрыть" дергает submit я только поправил со стороны работы функции arcticmodal |
+ по хорошему лучше сделать на Ajax
|
Сделал еще проще.. Создал страницу где всплывает окно. И просто после нажатия "Отправить" перенаправил на нее посетителя)) Но спасибо. за подсказки сейчас посмотрю вариант Infinity178.
|
Работает ваш вариант тоже. Возьму себе на заметку
|
kolhoz, Учитывайте комментарий laimas
|
Хорошо
|
| Часовой пояс GMT +3, время: 11:51. |