Tengo 15 botones en una misma página, cada uno debe desplegar un modal con una imagen diferente. El problema es que no quiero repetir 15 bloques de código, tanto del trigger del modal como de la estructura del modal; ¿Cómo evito repetir código apoyándome de JS? (en el ejemplo sólo agrego dos modals)
$('.button, .button1').click(function(){
var buttonId = $(this).attr('id');
$('#modal-container, #modal-container1').removeAttr('class').addClass(buttonId);
$('body').addClass('modal-active');
})
$('#modal-container, #modal-container1').click(function(){
$(this).addClass('out');
$('body').removeClass('modal-active');
});
#modal-container1.one1.out,
#modal-container.one.out {
transform: scale(1);
animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container1.one1.out .modal-background1 .modal1,
#modal-container.one.out .modal-background .modal {
animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
<div id="one" class="button">Hola</div>
<div id="one1" class="button1">Hola</div>
<!-- modal1 -->
<div id="modal-container">
<div class="modal-background">
<div class="modal">
<h2>I'm a Modal</h2>
<img src="resp_colectiva.jpg">
</div>
</div>
</div>
<!-- Modal2 -->
<div id="modal-container1">
<div class="modal-background1">
<div class="modal1">
<h2>I'm a Modal</h2>
<img src="retro_continua.jpg">
</div>
</div>
</div>