두 개 이상의 모달 박스 한 페이지에

Question

여기 두 버튼을 클릭하면 모달 박스가 팝업됩니다.

<div id="myModal2" class="modal"> 
    <div class="modal-content"> 
     <span class="close">×</span> 
    <p><h2><font color="black">Week 2</font></h2></p> 
     <p><font color="black"> Example 1 </p> 
    </div> 
</div> 

스크립트 :

<script> 
// Get the modal 
var modal = document.getElementById('myModal'); 
var modal2 = document.getElementById('myModal2'); 

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 
var btn2 = document.getElementById("myBtn2"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 

btn2.onclick = function() { 
    modal.style.display = "block"; 
} 
// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 
</script> 

<!-- MODAL INFORMATION FOR WEEK 1 --> 
<div id="myModal" class="modal"> 
    <div class="modal-content"> 
     <span class="close">×</span> 
    <p><h2><font color="black">Week 1</font></h2></p> 
    <div class="modal-body"> 
     <p><font color="black"> ex1</p> 
    </div> 
    </div> 
</div> 

다음 주에 두 모달 정보입니다 :

<li type="button" id="myBtn" class="w3-hide-small w3-center"><a href="#" class="w3-hover-white">1</a></li> 
<li type="button" id="myBtn2" class="w3-hide-small w3-center"><a href="#" class="w3-hover-white">2</a></li> 

다음 주 하나에 대한 모달 정보입니다ID를 변경하면 모달 상자를 다르게 처리 할 수 ​​있으며 "Btn"과 "Btn2"를 다르게 호출 할 수 있다고 생각했습니다. 나는 1과 2를 클릭하면

, 그들은 모두 같은 주 하나에서 텍스트를 열 2. 같은 모달 대상으로하기 때문에 동일한 내용을보고있는 이유는

Answer 1

:

을

btn.onclick = function() { 
    modal.style.display = "block"; 
} 

btn2.onclick = function() { 
    modal.style.display = "block"; <--- should be modal2 
} 

Answer 2

모달에 대한 데이터 속성을 추가하십시오. 당신은

전

<!-- MODAL INFORMATION FOR WEEK 1 --> 
<div id="myModalA" class="modal"> 
    <div class="modal-content"> 
     <span class="close">×</span> 
    <p><h2><font color="black">Week 1</font></h2></p> 
    <div class="modal-body"> 
     <p><font color="black"> ex1</p> 
    </div> 
    </div> 
</div> 


<div id="myModal2" class="modal"> 
    <div class="modal-content"> 
     <span class="close">×</span> 
    <p><h2><font color="black">Week 2</font></h2></p> 
     <p><font color="black"> Example 1 </p> 
    </div> 
</div> 


<li type="button" id="myBtn" class="w3-hide-small w3-center" data-target="myModalA"><a href="#" class="w3-hover-white">1</a></li> 


<li type="button" id="myBtn2" class="w3-hide-small w3-center" data-target="myModal2"><a href="#" class="w3-hover-white">2</a></li> 

당신은 자바 스크립트에서 조동사를 엽니 다 부트 스트랩의 jQuery 방법을 사용한다