I am making a module which shows a modal. I added a button on modal to close it and added this.hide as it's onclick but this does not closes the modal
code:
class Modal {
constructor(content, allowclose, onclose) {
this.content = content;
this.allowclose = allowclose || true;
this.onclose = onclose;
// console.log(this.content)
document.body.innerHTML += `<div id='modal-js-bg'><div id='modal-js-main'><div id='modal-js-content'>${this.content}</div>
<div id='modal-js-close'><button id='modal-js-close-btn' disabled=${!this.allowclose} onclick=${this.hide}>Close</button></div></div></div>`
}
show() {
document.getElementById('modal-js-bg').style.display = 'flex';
document.getElementById('modal-js-main').style.animation = 'showmodal 325ms ease-in';
}
hide() {
document.getElementById('modal-js-bg').style.display = 'none';
document.getElementById('modal-js-main').style.animation = 'hidemodal 325ms ease-out';
}
}#modal-js-bg{
width: 100vw;
height: 100vh;
position: absolute;
background-color: rgba(0,0,0,0.6);
display: none;
justify-content: center;
align-items: center;
}
#modal-js-main{
background-color:white;
width:50%;
padding:10px;
display: flex;
font-size:18px;
align-items: center;
flex-direction:column;
}
#modal-js-close-btn{
background-color: #2e2eff;
height:35px;
width: 80px;
border-radius: 7px;
color: white;
border: none;
}
@keyframes showmodal {
0%{
opacity:0;
}
100%{
opacity:1;
}
}
@keyframes hidemodal {
0%{
opacity:1;
}
100%{
opacity:0;
}
}<html>
<head>
<title>modal</title>
</head>
<body>
<script>
window.onload = function () {
const mymodal = new Modal('this is example')
mymodal.show()
}
</script>
</body>
</html>on document tree i can see that onclick function is written but every thing is written in small letters getElementById is written as getelementbyid I am not able to solve this can anyone help Thanks in advance