У нас есть 8 блоков с картинками, нажимаешь на блок с картинкой и появляется определенное модальное окно, и так при нажатии на каждый блок что бы появлялся определенное модал окно !
<h2><b>PUPPIES FOR SALE: OLD ENGLISH SHEEPDOG 3 BOYS!</b><h2>
<div class="cnt">
<div class="boys">
<div class="boystabl open-modal-btn" data-open-modal="modal1"><img src="http://bobtail-dog.com/wp-content/uploads/2019/05/m10-2.jpg" alt="альтернативный текст"><h3 class="textboystabl">Мальчик - 1 - Ищет любящую семью!<h3></div>
<div class="boystabl open-modal-btn" data-open-modal="modal2"><img src="http://bobtail-dog.com/wp-content/uploads/2019/05/m10-2.jpg" alt="альтернативный текст"><h3 class="textboystabl">Мальчик - 2 - Ищет любящую семью!<h3></div>
<div class="boystabl open-modal-btn" data-open-modal="modal3"><img src="http://bobtail-dog.com/wp-content/uploads/2019/05/m10-2.jpg" alt="альтернативный текст"><h3 class="textboystabl">Мальчик - 3 - Ищет любящую семью!<h3></div>
</div>
</div>
МОДАЛ ОКНО:
<div id="wrapper">
<div class="cover"></div>
<div class="modal">
<div class="content">
<a class="close-modal">
МОДАЛ СОЖЕРЖИМОЕ №1
<hr>
<button id="close_modal">
Закрыть
</button>
</div>
</div>
<div id="wrapper1">
<div class="cover"></div>
<div class="modal1">
<div class="content1">
<a class="close-modal">
СОДЕРЖИМОЕ МОДАЛА №2
<hr>
<button id="close_modal">
Закрыть
</button>
</div>
</div>
Jquery
jQuery(function($){
var wrap = $('#wrapper'),
btn = $('.open-modal-btn'),
modal = $('.cover, .modal, .content'),
close = $('#close_modal'),
close1 = $('#close_modal1'),
state = {
"close": 0
};
btn.on('click', function() {
modal.fadeIn();
});
$('.modal').click(function() {
wrap.on('click', function(event) {
var select = $('.content');
if (!$(event.target).closest(select).length && !state.close)
modal.fadeOut();
state.close = 0;
$(this).unbind('click');
});
});
close.on('click', function() {
modal.fadeOut();
state.close = 1;
});
close1.on('click', function() {
modal.fadeOut();
state.close = 1;
});
});