Заметки кодера сайтов

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

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

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

  1. Открываем Управление формами >> Ваша форма >> Свойства >> 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>';

  2. Добавляем стили оформления в файл .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;
    }
  3. После отправки формы появляется модальное окно с ссобщением благодарности, в котором будет таймер на 7 секунд. По истечению времени браузер сделает шаг назад. Пользователю покажется, что страница обновилась :)