javascript - Multiple buttons and modals

I'm new to JS and although I have bought some books to start learning properly I wondered if anyone could advise with this? I have store that lists many products. On the store page I have added a button to the bottom of each item and want an action when you click a button. I've applied this code, it works but only on the first element anyway - because it based on id's:

HTML:

<button id="myBtn" class="openmodal">Open Modal</button>

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

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

</div>

JS:

// Get the modal
 window.onload = function(){
var modal = document.getElementById('myModal');

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

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

// When the user clicks on the button, open the modal
btn.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";
    }
}};

I've tried changing the JS to acmodate class names like this, but it didn't work:

// Get the modal
 window.onload = function(){
var modal = document.getElementsByClassName('modal');

// Get the button that opens the modal
var btn = document.getElementsByClassName("openmodal");

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

// When the user clicks on the button, open the modal
btn.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";
    }
}};

Please can anyone help?

Thanks in advance Chris

HTML:

<button id="myBtn" class="openmodal">Open Modal</button>

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

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

</div>

JS:

// Get the modal
 window.onload = function(){
var modal = document.getElementById('myModal');

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

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

// When the user clicks on the button, open the modal
btn.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";
    }
}};

I've tried changing the JS to acmodate class names like this, but it didn't work:

// Get the modal
 window.onload = function(){
var modal = document.getElementsByClassName('modal');

// Get the button that opens the modal
var btn = document.getElementsByClassName("openmodal");

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

// When the user clicks on the button, open the modal
btn.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";
    }
}};

Please can anyone help?

Thanks in advance Chris

Share Improve this question edited Mar 25, 2017 at 8:17 Mihai Alexandru-Ionut 48.4k14 gold badges105 silver badges132 bronze badges asked Mar 21, 2017 at 8:19 Walshie1987 4432 gold badges8 silver badges21 bronze badges

add full html code. – Sagar V Commented Mar 21, 2017 at 8:21
getElementsByClassName doesn't return a single element, but rather a NodeList. You need to extract the required element from this first, e.g. by iterating over it with a for loop. – mingos Commented Mar 21, 2017 at 8:27
@Walshie1987, it is working for you ? – Mihai Alexandru-Ionut Commented Mar 21, 2017 at 12:10
Hi, I'm just out at the minute but I will try this ASAP. It looks very promising! I see where I went wrong. I'll be back to you shortly! Thanks – Walshie1987 Commented Mar 21, 2017 at 13:15

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

You should use classes instead ids because id must be unique.

Then you have to bind a click event handler for each of the buttons, using onclick method.

<button class="openmodal myBtn">Open Modal</button>

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

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

var modals = document.getElementsByClassName('modal');
// Get the button that opens the modal
var btns = document.getElementsByClassName("openmodal");
var spans=document.getElementsByClassName("close");
for(let i=0;i<btns.length;i++){
   btns[i].onclick = function() {
      modals[i].style.display = "block";
   }
}
for(let i=0;i<spans.length;i++){
    spans[i].onclick = function() {
       modals[i].style.display = "none";
    }
 }

Here is working solution.

var modals = document.getElementsByClassName('modal');
// Get the button that opens the modal
var btns = document.getElementsByClassName("openmodal");
var spans=document.getElementsByClassName("close");
for(let i=0;i<btns.length;i++){
    btns[i].onclick = function() {
        modals[i].style.display = "block";
    }
}
for(let i=0;i<spans.length;i++){
    spans[i].onclick = function() {
        modals[i].style.display = "none";
    }
}

.modal{
  display:none;
}

<button class="openmodal myBtn">Open Modal</button>

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

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal1</p>
</div>
</div>
<button class="openmodal myBtn">Open Modal</button>

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

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal2</p>
</div>
</div>
<button class="openmodal myBtn">Open Modal</button>

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

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal3</p>
</div>
</div>
<button class="openmodal myBtn">Open Modal</button>

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

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal4</p>
</div>
</div>
<button class="openmodal myBtn">Open Modal</button>

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

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal5</p>
</div>
</div>
<button class="openmodal myBtn">Open Modal</button>

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

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal6</p>
</div>
</div>

Varying modal content
Use event.relatedTarget and HTML data-bs-* attributes to vary the contents of the modal depending on which button was clicked.
https://getbootstrap./docs/5.0/ponents/modal/#varying-modal-content

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Multiple buttons and modals - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)