8 августа 2014 в 17:33
Здравствуйте. Наткнулся на такую проблему. Хочу сделать форму обратной связи. Чтоб выезжала слева. Вот ее html-код:
<div id="form-wrapper" class="pointer">
<div id="closewrite">
<div id="close"></div>
<div id="write"></div>
</div>
<form action="mail.php" method="post" name="conform">
<input type="text" name="name" size="50">
<input type="text" name="phone" size="14">
<input type="text" name="email" size="30">
<textarea name="msg" rows="5" cols="48">Ваше сообщение</textarea>
<div id="send" OnClick="conform.submit()"><p>Отправить</p></div>
</form>
</div>
<div id="closewrite">
<div id="close"></div>
<div id="write"></div>
</div>
<form action="mail.php" method="post" name="conform">
<input type="text" name="name" size="50">
<input type="text" name="phone" size="14">
<input type="text" name="email" size="30">
<textarea name="msg" rows="5" cols="48">Ваше сообщение</textarea>
<div id="send" OnClick="conform.submit()"><p>Отправить</p></div>
</form>
</div>
Вот код jquery:
$(".pointer").click(function()
{
$("#form-wrapper").toggleClass("pointer").animate({left: "100px"}, 300); /* удалить класс, чтобы выдвинутая
форма не анимировалась вновь. Выдвинуть форму. */
$("#close").animate({height: "0px"}, 400).animate({height: "30px"}, 300); //подождать 400мс и раскрыть //кнопку "закрыть"
});
$("#close").click(function()
{
$("#form-wrapper").toggleClass("pointer").animate({left: "-370px"}, 300); /* Включить вновь класс и задвинуть форму */
{
$("#form-wrapper").toggleClass("pointer").animate({left: "100px"}, 300); /* удалить класс, чтобы выдвинутая
форма не анимировалась вновь. Выдвинуть форму. */
$("#close").animate({height: "0px"}, 400).animate({height: "30px"}, 300); //подождать 400мс и раскрыть //кнопку "закрыть"
});
$("#close").click(function()
{
$("#form-wrapper").toggleClass("pointer").animate({left: "-370px"}, 300); /* Включить вновь класс и задвинуть форму */
});
Вместо ожидаемого эфекта получаю результат, который можно посмотреть здесь. Форма закрывается и тут же выезжает обратно. Кто чем может помогите, пожалуйста.
Комментарии
Эм. То есть Вы в готовую CMS, с готовыми формами, решили написать свою?)
Сделайте форму через модуль Webform или Entityform (я лично 2й предпочитаю) и суйте его во всплывашку.
А если любите покодить, можно вообще свою написать через Drupal FormAPI.
Так вот проблема как раз во всплывашке. + хочется попрактиковаться)
После того как Вы сделали свою форму. Выводите её в блок. Блоку задаёте нужный css. И дальше jquery можете хоть на луну его задвинуть.
И проблема не во всплывашке кстати.
Спасибо за помощь. Но, насколько я понимаю, я как раз все сделал так, как вы сказали. По коду видно, что форма находится в диве, которым я пытаюсь манипулировать через jquery.
Сделайте так:
Класс f-close - прописано положения формы в закрытом состоянии.
Класс f-open - в открытом
Не забудьте transition в css добавить, чтобы красиво выплывало.
В jquery: жмём кнопку открыть, убирает класс f-close и добавляем f-open.
Ну и обратно понятно.
Спасибо большое за совет.
Я предпочел второй вариант.