Open different modal inside a main modal plain javascript

So I have three image elements that open a modal when clicking on them. The problem comes when I want to open a specific div that is inside the main modal.

I want to open one for the first image click, other for the second and same for the third one.

Actually with the following code I can see in the console that each article display is correctly changed to block with each image click but the window does not show on the screen.

I checked all the styles and everything looks fine, z-index, positions and display.

Am I missing something? If anybody has a better solution or idea is welcome.

HTML

<div>
    <img src="#" alt="#" class="image image--1" onclick="openModal()">
    <img src="#" alt="#" class="image image--2" onclick="openModal()">
    <img src="#" alt="#" class="image image--3" onclick="openModal()">
</div>



<div class="modal">          
    <article class="modal--1>
    </article>
    <article class="modal--2>
    </article>
    <article class="modal--3>
    </article>  
</div>

JAVASCRIPT

const images = document.querySelectorAll('image');
const modal = document.querySelector('.modal');

const openModal = function() {
    modal.style.display = 'block';
    console.log('Modal window opened');
}

for(var i = 0; i < images.length; i++) {
    images[i].addEventListener('click', openModal);
};


function openImage1() {
    openModal;
    modal = document.querySelector('image--1').style.display = 'block';
}

function openImage2() {
    openModal;
    modal = document.querySelector('image--2').style.display = 'block';
}

function openImage3() {
    openModal;
    modal = document.querySelector('image--3').style.display = 'block';
}

const htmlImage = document.querySelector('.tech__image--html');
const cssImage = document.querySelector('.tech__image--css');
const jsImage = document.querySelector('.tech__image--javascript');

htmlImage.addEventListener('click', openHTML);
cssImage.addEventListener('click', openCSS);
jsImage.addEventListener('click', openJS);


Read more here: https://stackoverflow.com/questions/64948990/open-different-modal-inside-a-main-modal-plain-javascript

Content Attribution

This content was originally published by Uzumaki at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: