как привязать модальное коно к css кнопке типа callbackhunter

Выкладывай на jsfiddle

Привязка готовых окон происходит по ID или Class
Допустим есть у тебя кнопка

<a class="callbackhunter"></a>
То модальное окно привязывается вот так (на jQuery)

$('.callbackhunter').modal();
Вместо modal() используется функция из плагина, надо смотреть инструкцию о окну.

Выложил: http://jsfiddle.net/Heloboy/cd8sjz71/
На всякий случай еще сюда: http://energyactivation.spb.ru/superzvonok/index.html
Последний обновленный архив (убрал лишнее) https://yadi.sk/d/p-uwzi85iWov3

BaNru я не понимаю ничего в модальных окнах вы может мне прикрепить к этой кнопке окно (любое даже самое простое), вы мне очень сильно поможете, я ничего в этом не разбираюсь.

На данный момент подобрал модальное окно ( вверху слева в углу) и вставил его на одну страницу с кнопкой (справа вверхнем углу) . Но связать их пока не получилось. http://energyactivation.spb.ru/superzvonok/index.html

Ничего не получилось с этой командой.
То модальное окно привязывается вот так (на jQuery)

$('.callbackhunter').modal();


Модальная кнопка и модальное окно выглядит так:

<!-- Модальная кнопка -->
<label title="Заказать обратный звонок" class="btn" for="modal-2"></label>&nbsp;&nbsp;</label>
</div>
<!-- Модальная кнопка -->

<!-- Модальное окно и его потроха -->
<div class="modal">
<input class="modal-open" id="modal-2" type="checkbox" hidden>
<div class="modal-wrap" aria-hidden="true" role="dialog">
<label class="modal-overlay" for="modal-2"></label>
<div class="modal-dialog">
<div class="modal-header">
<h2>Заказать обратный звонок</h2>
<label class="btn-close" for="modal-2" aria-hidden="true">×</label>
</div>
<div class="modal-body">
<form>
<center><iframe width="250" height="225" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://energyactivat.../opr2/opr/1.php"></iframe></center>
</form>
</div>
</div>
</div>
</div>
<!-- Модальное окно и его потроха -->


Сама кнопка звонка такая:

<!-- КНОПКА -->
<!-- Стили кнопки звонка -->
<link rel="stylesheet" href="css/style.css">
<!-- Стили модального окна -->
<link rel="stylesheet" type="text/css" href="css/style1.css">

<div id="uptocall-mini">
<div class="uptocall-mini-phone"></div>
</div>
<!-- КНОПКА -->

На кнопку и на модалку два отдельных стиля.

Так у тебя не подключен не один JS плагин модального окна.
Индивидуально писать никто не будет, так что выбирай какой-нибудь готовый.
Из популярных, а следовательно гибких и тяжелых есть Lightbox, FancyBox, jQuery UI dialog

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

Инструкций в общем-то полно в интернете.
Переписывать их не вижу смысла.
Вот например подробная инструкция простого окна
http://dontforget.pro/javascript/prostoe-modalnoe-okno-na-jquery-i-css-bez-plaginov/

Тема закрыта, мне помог прекрасный программист и грамотный Человек - Анрей (Dobrovoi), честь ему за это и хвала, нашел его по статье dbmast.ru/modalnoe-okno-na-html5-css3-i-skrytyh-chekboksah -, Все работает можете посмотреть http://energyactivation.spb.ru/superzvonok/index.html