97
rated 0 times
[
99]
[
2]
/ answers: 1 / hits: 16093
/ 4 Years ago, thu, november 19, 2020, 12:00:00
so i am trying to do this modal however i am getting this error when i try to use the button, i am not sure if the is how it is done as this is my first time using js and i have been following tutorials. Thank you for the help.
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>
More From » html
