script - 모달팝업버튼을 여러개 복사
본문
모달팝업 버튼을 여러개 복사했습니다. 1번버튼 /2번 버튼 /3번 버튼
각 버튼을 눌렀을때 1번버튼을눌렀을때 1번이미지 / 2번버튼을 눌렀을때 2번 이미지가 띄게 하고 싶은데 스크립트 어떻게 고쳐야하나요 ?
버튼이 여러개 많이 필요합니다. 1 번~ 20개 정도 만들 예정이고 추후 계속 버튼이 추가될 예정입니다.
------------- html -----------------------------------------
1) 1번 버튼
<div class="modal" data-modal>
<div class="modal-content">
<button role="button" class="close-icon" data-modal="close-modal">X</button>
<div class="modal-header">
<h2 class="modal-title">서브내용확인</h2>
</div>
<div class="modal-body">
<p></p>
<img src="img/map_01.jpg" alt="1번이미지">
</div><!-- .modal-content -->
</div>
</div>
<button role="button" data-modal="open-modal" class="btn btn-danger">1번 버튼</button>
</div>
2) 2번 버튼
<div class="modal" data-modal>
<div class="modal-content">
<button role="button" class="close-icon" data-modal="close-modal">X</button>
<div class="modal-header">
<h2 class="modal-title">서브내용확인</h2>
</div>
<div class="modal-body">
<p></p>
<img src="img/map_02.jpg" alt="2번이미지">
</div><!-- .modal-content -->
</div>
</div>
<button role="button" data-modal="open-modal" class="btn btn-danger">2번 버튼</button>
</div>
------------- script -----------------------------------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/simple-modal.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
답변 1
<div class="modal-content">
<button role="button" class="close-icon" data-modal="close-modal">X</button>
<div class="modal-header">
<h2 class="modal-title">서브내용확인</h2>
</div>
<div class="modal-body">
<p></p>
<img src="img/map_01.jpg" alt="1번이미지">
</div>
</div>
<div>
<button role="button" data-modal="open-modal" class="btn btn-danger" data-num="1">1번 버튼</button>
<button role="button" data-modal="open-modal" class="btn btn-danger" data-num="2">2번 버튼</button>
<button role="button" data-modal="open-modal" class="btn btn-danger" data-num="3">3번 버튼</button>
</div>
<script>
$(function() {
$('btn').on('click', function() {
var num = parseInt($(this).data('num'));
num = num < 10 ? '0' + num : num;
$('.modal-content').modal();
$('.modal-body img').attr('src', 'img/map_' + num + '.jpg');
});
});
</script>
