Trying to implement a modal feature for the first time but encountering an error when clicking the button. Unsure if I'm following the correct procedure as a JS beginner. Any assistance would be appreciated.
ERROR { "message": "Uncaught TypeError: Cannot read property 'classList' of null", "filename": "https://stacksnippets.net/js", "lineno": 67, "colno": 21 }
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');
open.addEventListener('click', () => {
modal_container.classList.add('show');
});
close.addEventListener('click', () => {
modal_container.classList.remove('show');
});button {
background-color: crimson;
border: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
color: white;
padding: 20px 30px;
font-size: 14px;
border-radius: 5px;
margin-top: 10px;
}
.modal-container {
background-color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
opacity: 0;
pointer-events: none;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 1;
}
.modal-container .show {
pointer-events: auto;
opacity: 1;
}
.modal {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
background-color: white;
border-radius: 5px;
padding: 30px 50px;
width: 800px;
max-width: 100%;
text-align: center;
}
.modal h1 {
margin: 0;
}
.modal p {
opacity: 0.7;
font-size: 14px;
} <button id="open">Introduction</button>
<div class="modal-container" id="modal-container">
<div class="modal">
<h1>Introduction</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta pariatur ut, veniam illum nemo repellat explicabo dignissimos ex ipsum aliquid.</p>
<button id="close">Click here to close.</button>
</div>
</div>