Open different content into a modal depending on which button is pressed

  javascript, modal-dialog

I have a simple modal and I managed to get multiple links (buttons) to trigger the modal, however, I also need to load different content into the modal based on which link (button) is pressed. So I have a couple of links:

<a class="myBtn" href="#">Cats</a>

<a class="myBtn" href="#">Dogs</a>

and I have my content divs:

    <div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <span class="close"><img src="svg/close.svg"></span>
                    <div class="modal-header clearfix">
                        <h3">Cats</h3>
                    </div>
                    <div class="modal-body">
                        <h4>The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner.</h4>
                    </div>
                </div>
            </div>  


<div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <span class="close"><img src="svg/close.svg"></span>
                    <div class="modal-header clearfix">
                        <h3">Dogs</h3>
                    </div>
                    <div class="modal-body">
                        <h4>The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner.</h4>
                    </div>
                </div>
            </div> 

and finally my JS

<script type="text/javascript">
    
    // Get the modal
    var modal = document.getElementById("myModal");
    
    // Get the button that opens the modal
    var btn = document.querySelectorAll(".myBtn");
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    [].forEach.call(btn, function(el) {
    // When the user clicks the button, open the modal 
        el.onclick = function() {
          modal+'me'.style.display = "flex";
        }
    })
    
    // 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>

As mentioned, I want to load the Cats content DIV into the modal when I click one link and load the Dogs content DIV into the same modal when I click the other link.

I think I need to use data-ID or something to make the buttons unique but that’s where I noob out and get lost. Does anyone have a solution. Thank you

Source: Ask Javascript Questions

LEAVE A COMMENT