script - 모달팝업버튼을 여러개 복사 채택완료
모달팝업 버튼을 여러개 복사했습니다. 1번버튼 /2번 버튼 /3번 버튼
각 버튼을 눌렀을때 1번버튼을눌렀을때 1번이미지 / 2번버튼을 눌렀을때 2번 이미지가 띄게 하고 싶은데 스크립트 어떻게 고쳐야하나요 ?
버튼이 여러개 많이 필요합니다. 1 번~ 20개 정도 만들 예정이고 추후 계속 버튼이 추가될 예정입니다.
------------- html -----------------------------------------
1) 1번 버튼
2) 2번 버튼
------------- script -----------------------------------------
" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
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); })();
답변 1개
</p>
<p><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> </p>
<p><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></p>
<p><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></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인