Birden Fazla Düğme Oluşturulamıyor Modal

Question

Modal düğümü kopyalıyorum ve Sorun kodumda "Açık Modal 2" yi gösteremem. https://jsfiddle.net/dedi_wibisono17/xn3npwc4/

ne yapmalıyım: Burada

<button id="myBtn">Open Modal</button> 
<div id="myModal" class="modal"> 
<div class="modal-content"> 
    <span class="close">×</span> 
    <p>Some text in the Modal..</p> 
    </div> 

benim tam kodudur? Eğer

İki düğmenin kimlikleri değişken hangi kimliği sadece birinci elemanı ile bağlı Yani btn

Açık Modal ve Açık Modal2 hangi başlıklar aynıdır ne anlama geldiğini kimliği yok sayıldı Benim düşünceme You

Answer 1

yardımcı olur Umut. W3School gelen tanım ve kullanımına göre

,

getElementById() metodu

belirtilen kimliğe sahip birinci elemanı erişir.

Answer 2

ederiz myBtn

olduğunu

var btn = document.getElementById ("myBtn");

Teşekkürler

Answer 3

Bunu deneyin. Eğer "Aç Modal 2" elemanları için farklı kimliğini kullanmalıdır :)

<!-- Trigger/Open The Modal --> 
<button id="myBtn">Open Modal</button> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

<!-- Modal content --> 
<div class="modal-content"> 
<span class="close">×</span> 
<p>Some text in the Modal..</p> 
</div> 

</div> 

<button id="myBtn2">Open Modal 2</button> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

<!-- Modal content --> 
<div class="modal-content"> 
<span class="close">×</span> 
<p>Some text in the Modal..</p> 
</div> 

    </div> 


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

// 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"; 
} 
} 

Answer 4

"Open Modal" ve "Open Modal 2" düğmeleriniz için aynı kimliğiniz var. var btn = document.getElementById("myBtn"); yazdığınızda, önce ikinizin düğmesine bastınız. Ve sadece bu ilk düğmesine bağladığınız herhangi bir olay. Ben modifiye ettik

function setModal(btn,modal) { 
    btn.onclick=function() { 
     modal.style.display="block"; 
    } 
    window.onclick = function(event) { 
     if (event.target == modal) { 
      modal.style.display = "none"; 
     } 
    } 
    var span=modal.querySelectorAll(".close") [0]; 
    span.onclick = function() { 
     modal.style.display = "none"; 
    } 
}; 

setModal(document.getElementById("myBtn"),document.getElementById('myModal')); 
setModal(document.getElementById("myBtn1"),document.getElementById('myModal')); 

burada keman: Yani 'myBtn1' gibi bir şey için ikinci butonun id değiştirmek ve olay işleyicileri ayarlamak için bu kod parçası gibi bir şey kullanmak gerekir https://jsfiddle.net/1fgmfpfc/

Answer 5

Sizin HTML Javascript'te kimlik çakışması, kodunuzun önemli bir sorunudur. document.getElementById her zaman üst HTML kodunuzu modal2 kodunuzu modal1 değerinden daha üstte değiştirdiğinizde, modal2 açık fakat modal1'de açılmadığı şekilde bağlayın, böylece farklı HTML kimliği tanımlayın veya HTML kimliğinin dinamik adını deneyin.