Как сделать одно модальное окно для всех кнопок?

Question

[Виталий Малюжец]

Есть контактная форма в модальном окне:

<div class=download-cv-block>
<a id="modal_2" class=button>ЗАКАЗАТЬ</a>
</div>
<div id="win_modal_2" class="modal_2">
<div class="content">
<span class="close">&times;</span>
<div id="bg_modal_2">Введите свои данные и виберите тариф</div>
<form id=contact-form_2 action=contact_form/contact_form_design_2.php>
<div class=messages></div>
<div class=controls>
<div class=form-group>
<input id=form_name_2 type=text name=name class=form-control placeholder="Ваше имя" required=required data-error="Введите ваше имя">
<div class=form-control-border></div>
<i class="form-control-icon pe-7s-user"></i>
<div class="help-block with-errors"></div>
</div>
<div class=form-group>
<input id=form_email_2 type=email name=email class=form-control placeholder="Ваш Email" required=required data-error="Введите действительный электронный адрес">
<div class=form-control-border></div>
<i class="form-control-icon pe-7s-mail"></i>
<div class="help-block with-errors"></div>
</div>
<div class=form-group>
<input id=form_phone_2 type=text name=phone class=form-control placeholder="Ваш телефон" required=required data-error="Введите ваше телефон">
<div class=form-control-border></div>
<i class="form-control-icon pe-7s-call"></i>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<select name="product" class="form-control">
<option value="0" selected="selected" data-skip="1">Выберите тариф</option>
<option value="Сайт на базе готового решения">Сайт на базе готового решения</option>
<option value="Сайт с индивидуальным дизайном">Сайт с индивидуальным дизайном</option>
</select>
</div>
<div class=form-group>
<textarea id=form_message_2 name=message class=form-control placeholder="Текст сообщения или технического задания" rows=4 required=required data-error="Пожалуйста, напишите сообщение или техническое задание."></textarea>
<div class=form-control-border></div>
<i class="form-control-icon pe-7s-comment"></i>
<div class="help-block with-errors"></div>
</div>
<input type=submit class="button btn-send" value="Отправить сообщение">
</div>
</form>
</div>
</div>

Вызывается этим скриптом:

$(document).ready(function() {
	var modal = document.getElementById("win_modal");
	var span = document.getElementsByClassName("close")[0];

	$('#modal').on('click', function () {
		modal.style.display = "block";
	});

	span.onclick = function() {
		modal.style.display = "none";
	}
	
	window.onclick = function(event) {
		if (event.target == modal) {
			modal.style.display = "none";
    		}
	}
});

форма с одним содержим, но кнопок с ним будет больше 5 на сайте. Сайт на HTML. Как сделать так, чтобы не делать на каждую кнопку форму и не нагружать кодом сайт, а чтобы была только одна форма в коде?

Comments

[tyzberd]

прикрутите какой то плагин для модальных окон типа magnific popup и не мучайтесь https://codepen.io/anon/pen/pdRPZX

[tyzberd]

а если у вас bootstrap так там тоже есть модальные окна

[Виталий Малюжец]

tyzberd, у меня сайт на HTML как я плагин прикручу)?

[tyzberd]

я имел ввиду плагин на jquery или на чистом js https://plugins.jquery.com/?s=modal

[Виталий Малюжец]

Ну таким способом все равно придется пихать в каждую кнопку одну и туже форму(

[tyzberd]

нет, можно еще так https://codepen.io/anon/pen/jaywPN

[Ankhena]

Задать всем кнопкам одинаковый класс, а не id, по клику на него открывать модальное окно.

[Виталий Малюжец]

tyzberd, Спасибо! Получилось. )

Answer 1

[Егор Живагин]

$('#modal').on('click', function () {
    modal.style.display = "block";
  });

Замените #modal на любой класс. Присваивайте этот класс любым кнопкам, всё будет работать.

Не "сайт на Html" , а "сайт без бэкенда" ) А то все сайты так или иначе на html.
Комбинировать JS методы (getElementById) и jQuery... ну, как минимум незачем, каша получается)

Answer 2

[leni_m]

допустим у вас форма скрыта(display:none), есть n-е кол-во кнопок, по которым должна открываться форма, с классом lol(class="lol").
тогда код будет таким:

$(".lol").on('click', function() {
    $(modal).show();
});