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

Любой элемент 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>