modal not showing up even if i set it to visible?

Question

I'm new to web development and I'm trying to create a popup window when I click button "register" and "download". I put the class trigger into those button as a class and added a click listener to that class. However when I go and try to click the button to toggle the "show-modal" class to it, it doesn't show. I inspected the website and I can see the button works and the class is actually added to it when I click the button but nothing is showing? So I tried to set the visibility to visible but still nothing is showing. I'm not sure what to do. If someone good guide me to find the answer that would be great. I'm still trying to learn how to use my resources more effectively!

modal code (works/shows) ----> https://jsfiddle.net/51xr6y78/17/

modal code imbedded into my website (won't show) ----> https://jsfiddle.net/hq6vp4ee/

HTML

<div class="modal">
    <div class="modal-content">
        <div class="close-button">&times;</div>
        <h1>This is my modal.</h1>
    </div>
</div>

<div class="main-page-btn container">
        <a href="#" class="register trigger">Register</a>
        <a href="#" class="download trigger">Download</a>
</div>

CSS

.modal{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.5);
   opacity: 1;
   visibility: visible;
   transform: scale(1.1);
   transition: visibility 0s, linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.show-modal{
   opacity: 1;
   visibility: visible;
   transform: scale(1.0);
   transition: visibility 0s, linear 0s, opacity 0.25s 0s, transform 0.25s;
}

JS

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");

function toggleModal(){
    modal.classList.toggle("show-modal");
}

function windowOnClick(event){
    if (event.target === modal){
        toggleModal();
    }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

Answer 1

I think the issue is that .modal class is probably defined before(ie, Bootstrap).

Just change the .modal class name :

.myModal {
  position: fixed;
  top: 0;
  left: 0;
}

And your html: <div class="myModal">

And in your js var modal = document.querySelector(".myModal");

cheers

Answer 2

A problem you are having here is actually with your events triggering. If we look at your JS as posted above:

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");

function toggleModal(){
    modal.classList.toggle("show-modal");
}

function windowOnClick(event){
    if (event.target === modal){
        toggleModal();
    }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

You are trying to add the click event two ways - directly on the button, and delegated via the window. The direct version is working correctly:

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");

function toggleModal(){
    modal.classList.toggle("show-modal");
}


trigger.addEventListener("click", toggleModal);

You have correctly added an eventlistener to the button and clicking it calls the 'toggleModal' event.

However the event on the window is a problem:

function windowOnClick(event){
    if (event.target === modal){
        toggleModal();
    }
}
window.addEventListener("click", windowOnClick);

If you add a console.log in that function like this:

function windowOnClick(event){
  console.log(event.target)
  if (event.target === modal){
    toggleModal();
  }
}
window.addEventListener("click", windowOnClick);

You will see that the event.target is equal to <a href="#" class="register trigger">Register</a>, not modal. There are ways you coud fix this, but it's not necessary as your direct method would work if you just remove this one.

The second issue I see is, as you suggested, your modal is appearing behind other content so you never see it. If you add z-index:2 to .show-modal it should move it in front of your content.