С помощью нашего сервиса Вы сможете создавать практически любые, как статические, так и всплывающие формы для вашего сайта, получать e-mail и sms сообщения с введенными пользователями данными.
Задать вопрос
Заказать установку
Ваши пожелания

Новости

23.01.2016
Реферальная программа
Заработок для веб-мастров, веб-студий и не только.
Подробнее
23.01.2016
Открытие сервиса
Завершены все тесты. Все работает как часы. Ура!
Подробнее
Все новости

Создание кнопок для вызова модальных форм

Любой элемент HTML страницы может быть кнопкой для вызова всплывающей формы. Это может быть и DIV, и IMG и SPAN и любые другие (ссылку кнопкой делать не рекомендуем). Чтобы элемент сделать кнопкой - ему необходимо присвоить class="bt_tbForm", а также указать – форму с каким ID отображать.

Примеры:
<div class="bt_tbForm" data-tbform="M-XXX" /><div>
<img class="bt_tbForm" data-tbform="M-XXX" src="/images/callback.png" />
<span class="bt_tbForm" data-tbform="M-XXX">Вызов всплывающей формы<span>

XXX - id формы, которую требуется отобразить

Этот скрипт на все элементы HTML страницы с class="bt_tbForm" вешает событие – отображение всплывающей формы.

<script type="text/javascript">
$(document).ready(function(){
    $('.bt_tbForm').tbForm();
});
</script>

Нужно отметить, что ширина модального окна по умолчанию устанавливается равной 400px (пикселей, точек). Если Вы хотите изменить ширину вызываемого окна, то скрипт нужно вызвать с параметром width.

Приведенный ниже скрипт сделает ширину всех модальных окон равным 600px.

<script type="text/javascript">
$(document).ready(function(){
    $('.bt_tbForm').tbForm({width:600});
});
</script>

Если Вам для необходимо, что бы для одних  форм была одна ширина, а для других – другая, то этим кнопкам необходимо присвоить разные классы и вешать события отдельно на каждый class.

К примеру, ширина для формы "Заказать обратный звонок" должна быть 300px, а для формы "Обратная связь" 500px. 

<img class="bt_tbForm_CB" data-tbform="M-XX1" src="/images/callback.png" />
<img class="bt_tbForm_FB" data-tbform="M-XX2" src="/images/feedback.png" />

<script type="text/javascript">
$(document).ready(function(){
    $('.bt_tbForm_CB').tbForm({width: 300});
    $('.bt_tbForm_FB').tbForm({width: 600});
});
</script>

 

Яндекс.Метрика