Сообщение в модальном окне формы

  • 7 Ответов
  • 542 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

paskal

  • Осваиваюсь на форуме
  • ***
  • 125
  • 0
Добрый вечер! очень нужна помощь. Использую конструктор форм RSForm. Вывожу форму в модальном окне и просто на странице сайта. Подскажите, как можно, после нажатия на кнопку отправки, вывести сообщение благодарности? Так как после отправки страница перезагружается. В качестве модального окна использую скрипт jQuery. Штатный вариант Joomla с классом modal не подходит.
Адрес сайта: http://ensina-me.foxspy.ru/
Версия Joomla 3.4

Заранее спасибо.

*

capricorn

  • Практически профи
  • *******
  • 1634
  • 106
Re: Сообщение в модальном окне формы
« Ответ #1 : 02.08.2015, 00:03:13 »
<a href="index.php?option=com_rsform&formId=123&tmpl=component" data-lightbox="type:iframe;width:800;height:900;">Моя форма</a>

так не пробовали?

*

paskal

  • Осваиваюсь на форуме
  • ***
  • 125
  • 0
Re: Сообщение в модальном окне формы
« Ответ #2 : 02.08.2015, 00:19:16 »
Пробовал. Такой вариант не работает. Вместо модального окна, переходит на страницу с формой

*

paskal

  • Осваиваюсь на форуме
  • ***
  • 125
  • 0
Re: Сообщение в модальном окне формы
« Ответ #3 : 02.08.2015, 00:20:34 »
Тогда еще вопрос есть по этой форме. Я делал эту же форму через класс modal. Все открывает и отправляется. Но, почему то, не подключается нестандартный шрифт.

*

volkovici

  • Новичок
  • *
  • 2
  • 0
Re: Сообщение в модальном окне формы
« Ответ #4 : 04.06.2016, 14:41:59 »
Добрый вечер! очень нужна помощь. Использую конструктор форм RSForm. Вывожу форму в модальном окне и просто на странице сайта. Подскажите, как можно, после нажатия на кнопку отправки, вывести сообщение благодарности? Так как после отправки страница перезагружается. В качестве модального окна использую скрипт jQuery. Штатный вариант Joomla с классом modal не подходит.
Адрес сайта: http://ensina-me.foxspy.ru/
Версия Joomla 3.4

Заранее спасибо.


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

Например, в моем случае, на подопытном сайте блоки страницы прокручиваются специальным скриптом. И после отправки заявки, сообщение благодарности оказывается в самом низу страницы, его просто не видно и не понятно, ушло ли сообщение.

Ход действий следующий:

    Открываем Управление формами >> Ваша форма >> Свойства >> PHP скрипты >> Самый последний блок "Строка $thankYouMessage содержит HTML код ..." >> туда и добавляем этот код:
    $thankYouMessage = '</div><div class="modal-message"><div class="momo">
    <script type="text/javascript">
    function timer(){
    var obj=document.getElementById("timer_inp");
    obj.innerHTML--;
    if(obj.innerHTML==0){history.go(-1);setTimeout(function(){},1000);}
    else{setTimeout(timer,1000);}
    }
    setTimeout(timer,1000);
    </script><div class="momo2">
    <img src="/images/logo2.png" alt="" style="padding-left: 250px;">
    '.$thankYouMessage.'
    <p style="text-align: center;">Через <span id="timer_inp">7</span> секунд вы будите перенаправлены обратно..</p></div></div>';

    Добавляем стили оформления в файл .css

    .momo2{
    background-color: rgba(255, 255, 255, 0.7);
        border: 1px solid #fff;
        border-radius: 10px;
        height: 400px;
        left: 50%;
        margin-left: -300px;
        margin-top: -200px;
        position: fixed;
        top: 50%;
        width: 600px;
        z-index: 15;

    }
    .momo{
    background-color: rgba(0, 0, 0, 0.8);
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10;
    }
    .closed{
    border: 2px solid #fff;
        border-radius: 14px;
        cursor: pointer;
        float: right;
        margin-right: 5px;
        margin-top: 3px;
        padding: 3px 7px;
    }
    .modal-message { }
    .momo2 p{
    padding-left: 10px;
        padding-top: 10px;
    }
    После отправки формы появляется модальное окно с ссобщением благодарности, в котором будет таймер на 7 секунд. По истечению времени браузер сделает шаг назад. Пользователю покажется, что страница обновилась :)

*

SDKiller

  • Dev Team
  • ******
  • 2734
  • 320
  • ...ergo sum
Re: Сообщение в модальном окне формы
« Ответ #5 : 04.06.2016, 16:34:24 »
    Добавляем стили оформления в файл .css...

А оформление в свой пост не нужно добавлять? Есть же теги для кода, спойлеры

*

pavelrer

  • Завсегдатай
  • *****
  • 412
  • 8
Re: Сообщение в модальном окне формы
« Ответ #6 : 05.06.2016, 09:17:57 »
Ну вроде у рсформ после отправки вылетает продолжить. Она может появиться как цельная страничка. Чтоб в модаль вылетал только контент у адреса должна быть приставка &tmpl-component (вместо тере равно). Если нужно рс есть последняя. Ну и править - Продолжить, ну лично у меня рсформ еще и ошибки выводит.

*

vipiusss

  • Профи
  • ********
  • 5510
  • 318
  • JoomlaNet
Re: Сообщение в модальном окне формы
« Ответ #7 : 05.06.2016, 11:20:09 »
Подскажите, как можно, после нажатия на кнопку отправки, вывести сообщение благодарности? Так как после отправки страница перезагружается. В качестве модального окна использую скрипт jQuery.

RSForm Pro (т.к. я на ней):

Заходим:
Код
/administrator/components/com_rsform/helpers/rsform.php
Находим:
Код
$thankYouMessage = str_replace($replace, $with, $form->Thankyou);
Вставляем после:
Код
$thankYouMessage = '</div>
<div class="modal-message"><div class="RS1">
<script>$(document).ready(function(){$(\'.closed\').click(function(){$(\'.modal-message\').fadeOut("slow");});});</script>
<div class="RS2"><span class="closed">X</span>'.$thankYouMessage.'</div>
</div>';

Спойлер
[свернуть]

CSS:
Спойлер
[свернуть]

В настройках компонента указываем (в корректировке формы):

"Показывать благ. сообщение" - Нет
"Показывать кнопку продолжения" - Нет
"Возврат URL" - /sended

Там ещё есть "Используйте Ajax-подтверждение" - у меня стоит Нет, это там же, вот не помню, это надо или нет.

Создаём материал в Joomla со следующим содержанием (содержание на свою фантазию):

Код
<div class="modal-message">
<div class="RS1">
<div class="RS2" style="text-align: center;"><span class="closed"></span><span style="font-size: 18pt;">Спасибо за обращение!</span><br /><span style="font-size: 18pt;">Ваш вопрос успешно отправлен!</span></div>
</div>
</div>

Теперь идём в меню и делаем скрытый пункт "Пункт вывода материала" вашего с алиасом sended.

Всё. В модалке выскочит ваш материал, указанный в пункте меню по алиасу вызовом из формы.

Стили уже сами. Ещё помню, т.к. мануал когда-то нашёл в сети и (верхний пост у volkovici похоже был стырен тоже с каких-то простор, т.к. и CSS похож) что какой-то косяк был со скриптом, вот что менял, не помню, т.к. возможно косяк с моими скриптами.
Пробуйте, в итоге у меня работает.

« Последнее редактирование: 05.06.2016, 12:04:56 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями