How do I make close button work on multiple Modal pages

Question

I'm new at coding and have been teaching myself. I am working on creating a site for my art work. I want it so that each piece that is clicked on opens up a modal page with info about the piece. I was able to successfully create a functioning modal page with a functioning close button for the first page, but when I added the second page, the close button doesn't work.

I tried changing from querySelector to QuerySelectorAll, but that didn't seem to help. I'm thinking I'll try a forEach function soon, but not sure if that'll work. Any help is appreciated.

HTML

<div id="modalPage1" class="modalFish">
        
        <div id="modalContent1" class ="modalFishContent">
            
            <span class="closeButton">+</span>   

        <div><img id="modalImg" class="modalFishImg" src="Images/Fish School.jpg"></div>
        <div><p class="modalTxt">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall, 
            I decided to use this as the background. Being that it's a dark color, it's easy to layer on different 
            colors that will coordinate well, while adding a pop to it. </p>

            <p class="modalTxt">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back
                to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces 
                appear a bit obscure, almost reminicent of a pile of leaves. Looking closely, we can see that the origami is 
                in fact fish swimming in all different driections.
            </p>
            </div>
            
        
        </div>
    </div>


    <div id="modalPage2" class="modalTurtle">
        
        <div id="modalContent2" class="modalTurtleContent">
            
            <span class="closeButton">+</span>   

        <div><img id="modalImg" class="modalTurtleImg" src="Images/Sea Turtle.jpg"></div>
        <div><p class="modalTxt">After a trip to Mallorca, Spain, I discovered a new love for turtles. I ended up going to two aquariums while I 
            was there, and found the turtles to be very cute. The way they slowly moved about, and the way they swam. I remember seeing them all 
            stacked piled up on top of each other as one was climbing on top of the other ones, and accidentally knocked one of the turtles into 
            the water.</p>

            <p class="modalTxt">There was something a bit simple, and adorable about these turtles, so I wanted to create a piece that reflected 
                simplicity, and humbleness. I was also inspired by the tropical vibes as well, which led to my color scheme of light blue for the
                water, and brighter colors for each of the turtles. The blue is painted on a bit heavy to represent the waves of the water. In order 
                to achieve a simple and adorable vibe, I needed to focus on having the right colors, and limit the number of turtles I had, while 
                making sure I did not take up too much of the blue background. 
            </p>
            </div>
            
        
        </div>
    </div>

Javascript

    document.getElementById('portfolioPg1').addEventListener('click',
function (){
document.querySelector('.modalFish').style.display = 'flex';
});

document.getElementById('portfolioPg2').addEventListener('click',
function (){
document.querySelector('.modalTurtle').style.display = 'flex';
});


document.querySelector('.closeButton').addEventListener('click', 
function (){
document.querySelector('.modalFish').style.display = 'none';
document.querySelector('.modalTurtle').style.display = 'none';
});

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document. The querySelector() method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll() method instead. — lalit kumar, Aug 01 '21 at 16:46
Thank you, I thought, but when I change from querySelector () to querySelectorAll(), the "closeButton" class no longer seems to be selected and does not work for either modal page. Is there perhaps a trick to this that I'm missing? Again, any help is appreciated. — Kevin, Aug 02 '21 at 12:58
can you create a jsfiddle ( https://jsfiddle.net/ ) so that I can debug the code. — lalit kumar, Aug 04 '21 at 06:59
Thank you again for your help! I added everything into JS fiddle, but it doesn't function exactly the same as when I open it on my browser. Please let me know if you're able to identify the issue with regarding the Modal Pages. https://jsfiddle.net/kchico214/v5a1n7um/20/ — Kevin, Aug 07 '21 at 03:12
I have created a basic example which will solve your problem https://jsfiddle.net/lalitcse/5w9u2qdx/2/ — lalit kumar, Aug 08 '21 at 06:32
Thank you so much for taking the time out to write this. The example is clear! — Kevin, Aug 08 '21 at 17:49

score 0 · Answer 1 · edited Aug 01 '21 at 18:41

0

To return all the matches, use the querySelectorAll() function.

let closebtn = document.querySelectorAll(".myBtn");
closebtn.forEach(function(btn) {
   btn.addEventListener("click", function() {
      console.log('clicked')
   });
});

edited Aug 01 '21 at 18:41

Sven Eberth

3,057
12
24
29

answered Aug 01 '21 at 17:02

lalit kumar

133
1
8

How do I make close button work on multiple Modal pages

1 Answers1