테스트 사이트 - 개발 중인 베타 버전입니다

script - 모달팝업버튼을 여러개 복사 채택완료

더블샷a 4년 전 조회 2,726

모달팝업 버튼을 여러개 복사했습니다.   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">    

 

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
4년 전

</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>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인