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

user_1191557 0
Viewed 138

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

modal-dialog javascript
1 Answers

There are various solutions.

'use strict';

const animalLinks = document.querySelectorAll('[data-animal-link]');
const animalModals = document.querySelectorAll('[data-animal-modal]');

document.addEventListener('click', (evt) => {
    evt.preventDefault();
    const target = evt.target;

    if (target && target.matches('[data-animal-link]')) {
        let value = target.dataset.animalLink;
        
        // check target
        console.log(value)

        animalModals.forEach((item) => {
            if (item.dataset.animalModal === value) {
                item.style.display = 'block';
            }
        });
    }
});
#myModal {
  display: none;
  width: 100px;
  height: 100px;
}

[data-animal-modal = 'cats'] {
  background-color: tomato;
}

[data-animal-modal = 'dogs'] {
  background-color: gold;
}
<a data-animal-link="cats" class="myBtn" href="#">Cats</a>
<a data-animal-link="dogs" class="myBtn" href="#">Dogs</a>

<div data-animal-modal="cats" id="myModal" class="modal"></div>
<div data-animal-modal="dogs" id="myModal" class="modal"></div>

It's a simple code. You can fix it for your tasks.

user_154378560
Related