Писать на форуме DIAFAN.CMS могут только зарегистрированные пользователи. Войдите или зарегистрируйтесь.

Форум Сайт на DIAFAN.CMS Предложение работы и поиск исполнителей Доработка сайта - форма обратной связи в модальном окне


Антон (BiggoB) 09 августа, пятница

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

Александр (capitan) 10809 августа, пятница

Если без 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;
}


Ну как-то так.

Александр (capitan) 10809 августа, пятница

А, если с 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;
}

Антон (BiggoB) 11 августа, воскресенье

Спасибо за ответ. Не подскажите как это все встроить в шаблон формы обратной связи, чтобы управлять из админки полями?? Можете сделать?? ( не бесплатно конечно :))

Андрей (R4W) 8711 августа, воскресенье

Я бы сделал не на чистом CSS, а на fancybox.

Антон (BiggoB) 12 августа, понедельник

Можно и так конечно, главное чтоб было удобно и смотрелось хорошо.