Невозможно создать несколько кнопок Modal

Question

Я дублирую свою модальную кнопку и проблема заключается в том, что я не могу показать «Open Modal 2» в своем коде.

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

Вот мой полный код: https://jsfiddle.net/dedi_wibisono17/xn3npwc4/

Что я должен делать? Спасибо

Answer 1

Вы должны использовать другой идентификатор для ваших элементов "Open Modal 2".

В соответствии с определением и использованием от W3School,

метод getElementById() получает доступ к первому элементу с указанным идентификатором.

Answer 2

По моему скромному мнению, вы игнорировали, что идентификатор означают Идентификаторы

Две кнопки в таких же, которые титрах Open Модальный и Open Modal2

Так БТН переменный связан с только первым элементом, идентификатор myBtn

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

Thanks

Answer 3

Попробуйте это. Надеюсь, что это помогает :)

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

У вас есть тот же идентификатор для вашей кнопки «Открыть модальный» и «Открыть модальный 2». Когда вы пишете var btn = document.getElementById("myBtn");, вы получите первую из двух ваших кнопок. И любые события, которые вы связываете только для этого сперва кнопка. Таким образом, вы должны изменить идентификатор второй кнопки что-то вроде «myBtn1» и использовать что-то вроде этого куска кода для установки обработчиков событий:

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')); 

Я изменил свою скрипку здесь: https://jsfiddle.net/1fgmfpfc/

Answer 5

Вашего HTML id в Javascript, это серьезная проблема вашего кода. document.getElementById всегда связывает ваш верхний HTML-код так же, как если вы меняете свой код modal2 выше, чем modal1, тогда modal2 открывается, но не открывается в modal1, поэтому определите другой идентификатор HTML или попробуйте динамическое имя HTML-идентификатора.