I need to make more than one modal in one web page

Question

I need to make more than one modal in an HTML page, I can make one which is working fine but when i make another it doesnt work.

      <!-- The Modal -->
      <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
          <div class="modal-header">
          <span class="close">&times;</span>
            <h3>Edit Intro</h3>
            <h2></h2>
          </div>
          <div class="modal-body">
           <center><br> School/Collage<br><input type="text" name="" style="width:100%"><br><br>
            Degree<br><input type="text" name="" style="width:100%"><br><br>
            Field of study<br><input type="text" name="" style="width:100%"><br><br>
          Start Date<input type="date" name="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; End Date<input type="date" name=""><br><br>
          grade<br><input type="text" name="" style="width:100%"><br><br>
           Descrption<br><textarea cols="30%" rows="4%"></textarea>
          </div></center>

              <a href=""><button class="modalsave">Save</button></a>
              <a href=""><button class="modalcencel">Cencel</button></a>

        </div>

      </div>

                       <script>
                    // Get the modal
                    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 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";
                      }
                    }
                    </script>

This one modal works but when i use the code for more than one modal on same page the top one works but not the later ones.

Answer 1

Modal literally means such an element, that blocks the access to the rest of UI, until user is done interacting with it and closes it. So it is normal to have only a single active Modal (top one) at a time.

So I guess what you really asking here is - why your code doesn't show more than one popup at a time. And the reason for that is that this code is not generic and references specific DOM elements ( #myModal with all its content as the popup wrapper, #myBtn as the trigger for the popup) and only .close elements are generic (so that any DOM element with the .close class may act as the close control). But again, you attach click handler to the first found .close element only. Therefore, it shows only one popup, because all you have on the page is only one popup.

You need to generalize that code.

Answer 2

Have a look at this demo. It's a simple, accessible system for using multiple modals on the same page.

• No dependencies
• Uses aria-controls attribute on buttons, which point to each modal's id

A bit more info on aria-controls from MDN :

The aria-controls=[IDLIST] is used to associate a control with the regions that it controls. Regions are identified just like an id in a div, and multiple regions can be associated with a control using a space, eg aria-controls="myRegionID1 myRegionsID2"

 const buttons = document.querySelectorAll('[aria-controls]'); const modalButtons = document.querySelectorAll('.modal button'); const modals = document.querySelectorAll('.modal'); function hideModals() { modals.forEach(modal => modal.style.display = 'none'); } function showModal(modalId) { document.getElementById(modalId).style.display = 'block'; } function handleButtonClick() { const modalId = this.getAttribute('aria-controls'); hideModals(); showModal(modalId); } buttons.forEach(button => { button.addEventListener('click', handleButtonClick); }); modalButtons.forEach(button => { button.addEventListener('click', hideModals); }); // Hide modal when user clicks outside of modal content window.onclick = event => { if (event.target.classList.contains('modal')) { hideModals(); } } 

 .modal { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .modal-content { display: flex; align-items: center; justify-content: center; height: calc(100vh - 1em); width: calc(100vw - 1em); flex-direction: column; background-color: rgba(0, 0, 0, .8); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal>* { color: white; } 

 <div class="modal" id="modal1"> <div class="modal-content"> <p>Hello, I'm modal 1</p> <button>Close</button> </div> </div> <div class="modal" id="modal2"> <div class="modal-content"> <p>Hello, I'm modal 2</p> <button>Close</button> </div> </div> <button aria-controls="modal1">Open modal 1</button> <button aria-controls="modal2">Open modal 2</button> 

jsFiddle