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

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);