Breaking News: Grepper is joining You.com. Read the official announcement!

multiple modals

Ugly Unicorn answered on February 21, 2023 Popularity 4/10 Helpfulness 1/10

answer multiple modals

related multiple modals js

multiple modals

Comment

<h2>1st Modal</h2>

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

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<h2>2nd Modal</h2>

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

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

  <!-- Modal content -->
  <div class="modal2-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

See multiple modals js to accompany this

Popularity 4/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: whatever

Link to this answer
Share Copy Link

Contributed on Feb 21 2023

Ugly Unicorn

0 Answers Avg Quality 2/10

Closely Related Answers

multiple modals js

Comment

// Get the modal
var modal = document.getElementsByClassName('modal');

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


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

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

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

span[1].onclick = function() {
    modal[1].style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal[0]) {
         modal[0].style.display = "none";
     }
    if (event.target == modal[1]) {
         modal[1].style.display = "none";
     }  
}

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Feb 21 2023

Ugly Unicorn

0 Answers Avg Quality 2/10

multiple modals

Contents

More Related Answers

multiple modals

Closely Related Answers

multiple modals js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.