Search code examples
htmljquerybootstrap-4popup

Toggle modal popup from different buttons


I am trying to get this popup open from different buttons in the menu, however, the popup content would remain the same.

Thanks, Banick

function OpenModalT() {
  var modal = document.getElementById('myModalT');
  modal.style.display = "block";
}

function CloseModalT() {
  var modal = document.getElementById('myModalT');
  modal.style.display = "none";
}
<li>
  <a href="#" onclick="OpenModalT();">Button 1</a>

  <div id="myModalT" class="modal">
    <div class="modal-content">
      <span class="close" onclick="CloseModalT();">&times;</span>
      <p>
        <ppopup>
          <br>
          <br>
          <strong>Dummy text Dummy text Dummy Text <br><br> Kind Regards
          </strong>
        </ppopup>
      </p>
    </div>
  </div>
</li>

<li>
  <a href="#" onclick="OpenModalT();">Button 2</a>
</li>


Solution

  • Here's an example with which you can have any number of modals and buttons:

    • Use modals with a unique ID
    • Use <button type="button" data-modal="#some-modal-id"> to toggle your modals

    const elsModals = document.querySelectorAll(".modal");
    
    const toggleModal = (ev) => {
      const elBtn = ev.currentTarget;
      const elModal = document.querySelector(elBtn.dataset.modal);
      // Close all currently open modals:
      elsModals.forEach(el => {
        if (el !== elModal) el.classList.remove("is-active");
      });
      // Toggle open/close targeted one:
      elModal.classList.toggle("is-active");
    };
    
    const elsBtns = document.querySelectorAll("[data-modal]");
    elsBtns.forEach(el => el.addEventListener("click", toggleModal));
    /*QuickReset*/ * {margin:0; box-sizing: border-box;}
    
    .modal {
      position: fixed;
      z-index: 99999;
      display: flex;
      justify-content: center;
      align-items: center;
      left: 0; top: 0;
      width: 100vw; height: 100vh;
      transition: 0.4s;
      backdrop-filter: blur(3px);
      background: rgba(0,0,0,0.1);
      pointer-events: none;
      visibility: hidden;
      opacity: 0;
    }
    .modal.is-active {
      pointer-events: auto;
      visibility: visible;
      opacity: 1;
    }
    .modal-content {
      position: relative;
      background: #fff;
      padding: 30px;
      box-shadow: 0 5px 20px -5px rgba(0,0,0,0.3);
    }
    .modal-close {
      position: absolute;
      top: 10px;
      right: 10px;
    }
    <div id="modal-regards" class="modal">
      <div class="modal-content">
        <button type="button" data-modal="#modal-regards" class="modal-close">&times;</button>
        <p>Dummy text Dummy text Dummy Text<br>Kind Regards</p>
      </div>
    </div>
    
    <div id="modal-help" class="modal">
      <div class="modal-content">
        <button type="button" data-modal="#modal-help" class="modal-close">&times;</button>
        <p>If something is not clear,<br>feel free to ask.</p>
      </div>
    </div>
    
    <button type="button" data-modal="#modal-regards">Kind regards</button>
    <button type="button" data-modal="#modal-regards">Kind regards</button>
    <button type="button" data-modal="#modal-help">Ask for help!</button>

    Additionally:

    • Avoid using inline on* handlers same as you hopefully don't use inline style attributes- JS and CSS should be in one place only - and that's your files or tags.
    • Use a better code editor. is not quite the same as " - such editor will mark and highlight those small typos.
    • <ppopup> is an invalid HTML5 tag. – Roko C. Buljan 16 mins ago
    • Don't use <a href="#"> if you need a button. Use <button type="button"> instead.