Why isn't this displaying my box?

I’m trying to click on Sign In and have a box come up… this is the code.

<header>
<img class="logo" src="ancient-art-bali-35058.jpg">
<input placeholder="UserName">
<input placeholder="Password">
<button type="button" class="button1">Sign In!</button>


</header>

.modal-bg {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s opacity 0.5s;
}

.bg-active {
	visibility: visible;
	opacity: 1;
}
var button1 = document.querySelector('.button1');
var modalBg = document.querySelector('.modal-bg');

button1.addEventListener('click', function(){
	modalBg.classList.add('bg-active');
};

The box is not in the HTML.