如何打开具有相应 ID 的模态 div？

Question

I have a page with multiple modals, when i click a button for one of these modals, the first always opens. The code used to work with Bootstrap 4.0, but I switched from bootstrap to Tailwind CSS.

The modal div has id="modal1" . The button has class="modal-open" and data-target="#modal1" .

This is my javascript code:

var openmodal = document.querySelectorAll('.modal-open')
    for (var i = 0; i < openmodal.length; i++) {
      openmodal[i].addEventListener('click', function(event){
        event.preventDefault()
        toggleModal()
      })
    }

    const overlay = document.querySelector('.modal-overlay')
    overlay.addEventListener('click', toggleModal)

    var closemodal = document.querySelectorAll('.modal-close')
    for (var i = 0; i < closemodal.length; i++) {
      closemodal[i].addEventListener('click', toggleModal)
    }

    document.onkeydown = function(evt) {
      evt = evt || window.event
      var isEscape = false
      if ("key" in evt) {
        isEscape = (evt.key === "Escape" || evt.key === "Esc")
      } else {
        isEscape = (evt.keyCode === 27)
      }
      if (isEscape && document.body.classList.contains('modal-active')) {
        toggleModal()
      }
    };


    function toggleModal () {
      const body = document.querySelector('body')
      const modal = document.querySelector('.modal')
      modal.classList.toggle('opacity-0')
      modal.classList.toggle('pointer-events-none')
      body.classList.toggle('modal-active')
    }

When I click the button with data-target="modal3" , I want modal 3 to open, now modal 1 always opens.

Answer 1

const modal = document.querySelector('.modal')

This line will always return the first occurrence of class 'modal', thus modal 1, assuming it comes first in the markup. If you want toggleModal() to operate on another div, you will have to pass the ID of the div as an argument to toggleModal().

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector