Вход • Регистрация

Доработка сайта - форма обратной связи в модальном окне

  •
  • 09 августа 2019 г.
  • Нужно доработать форму обратной связи, чтобы при нажатии на кнопку Заказать форма открывалась в модальном окне.
  •
  • 09 августа 2019 г.
  • Если без JS, чисто на CSS

    Вызов формы
    Код
    <label for="fly_form">Показать форму</label>

    Блок формы
    Код
    <input type="checkbox" style="display:none" value="" id="fly_form">
    <div class="fly_box">
    <form>
    ...
    </form>
    </div>

    CSS
    Код
    .fly_box {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 99;
    }

    .fly_box form {
    display: block;
    position: absolute;
    width: 360px;
    background: #FFF;
    }

    #fly_form:checked + .fly_box {
    display: block;
    }


    Ну как-то так.
  • 09 августа 2019 г.
  • А, если с JS, то

    JS
    Код
    $(document).on("click",".view_hide_form",function(){
    $(".fly_box").toggleClass("show");
    return false;
    });

    HTML
    Код
    <span class="view_hide_form">Показать форму</span>

    Код
    <div class="fly_box">
    <span class="view_hide_form">Скрыть форму</span>
    <form>
    ...
    </form>
    </div>

    CSS
    Код
    .fly_box {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 99;
    }

    .fly_box.show {
    display:block;
    }

    .fly_box form {
    display: block;
    position: absolute;
    width: 360px;
    background: #FFF;
    left: 50%;
    top: 50%;
    margin-left: -180px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    }

    .fly_box .close {
    position: absolute;
    display: block;
    top: 15px;
    right: 15px;
    color: #FFF;
    }
  •
  • 11 августа 2019 г.
  • Спасибо за ответ. Не подскажите как это все встроить в шаблон формы обратной связи, чтобы управлять из админки полями?? Можете сделать?? ( не бесплатно конечно :))
    •
    • 11 августа 2019 г.
    • Я бы сделал не на чистом CSS, а на fancybox.
  •
  • 12 августа 2019 г.
  • Можно и так конечно, главное чтоб было удобно и смотрелось хорошо.

Новости

  • Вышла очередная сборка DIAFAN.CMS 7.2.2
  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
Все новости

Форум

Перейти на форум