여러 버튼으로 모달을 여는 방법은 무엇입니까?

Question

모달이 있고 둘 이상의 버튼으로 열려고합니다.

첫 번째 버튼 ('Diamont Packet')이 작동하지만 모달은 열리지 만 다른 버튼은 작동하지 않습니다. 버튼의 ID는 모두 id="detail"입니다.

모든 버튼을 작동시키는 방법, 모덜을 열려면 모든 버튼을 videlicet 하시겠습니까?

이것은 내 전체 코드 https://jsfiddle.net/hxhjyhpv/1/입니다.

이 내 JS 코드 :

var modal = document.getElementById('modal'); 
var btn = document.getElementById("detail"); 
var span = document.getElementsByClassName("close")[0]; 

btn.onclick = function() { 
    modal.style.display = "block"; 
} 
span.onclick = function() { 
    modal.style.display = "none"; 
} 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 

Answer 1

ID의 페이지에서 고유해야합니다. 간단히 클래스를 추가하고 document.querySelectorAll을 사용하여 버튼 배열을 가져 오면 좋습니다.

내 업데이트 된 jsfiddle here을 참조하십시오.

var modal = document.getElementById('modal'); 
var btns = document.querySelectorAll('.pack.detail'); 
var span = document.getElementsByClassName("close")[0]; 

[].forEach.call(btns, function(el) { 
    el.onclick = function() { 
     modal.style.display = "block"; 
    } 
}) 
span.onclick = function() { 
    modal.style.display = "none"; 
} 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
}