Issue
I have this simple code
const readmore = document.getElementById("read");
const modaloverlay = document.getElementById("modaloverlay");
const closeButton = document.querySelector(".closebutton");
readmore.addEventListener("click", function () {
modaloverlay.classList.add("overlayshows");
});
closeButton.addEventListener("click", function () {
modaloverlay.classList.remove("overlayshows");
});
window.addEventListener('click', function(e){
if ((modaloverlay.classList.contains("overlayshows")) && (e.target != modaloverlay)) {
modaloverlay.classList.remove("overlayshows");
}
});
.overlay {
background: rgba(0,0,0,.9);
padding: 20px;
position: fixed;
top: 10px;
bottom: 10px;
left: 0;
right: 0;
align-items: center;
justify-content: center;
display: none;
max-width: 600px;
margin: 0 auto;
color: #fff
}
.overlayshows {
display: block;
}
.closebutton {
cursor: pointer;
float: right;
}
<div class="modal">
<h1>Content</h1>
<button id="read">READ MORE</button>
</div>
<div class="overlay" id="modaloverlay">
<span class="closebutton">X</span>
<div class="modalinfo" >
Morecontent
</div>
</div>
When i click the button the modal is opened, this part is easy; i know that if i remove the last part of js it will work, but i want that if you click out the modal, the modal is closed, i dont know what is wrong. Thanks :)
Solution
This solution creates a modal singleton to make it easier to manage the lifecycle of the component. It also uses event delegation for easy event management. The key problem with your solution was not preventing the modal click event from propagating.
const modal = {
CLASSES: {
SHOW: 'overlayshows',
CLOSE_BUTTON: 'closebutton',
MODAL: 'modaloverlay',
READ: 'read'
},
isVisible: false,
el: document.getElementById("modaloverlay"),
initialize() {
modal.addEvents();
},
show() {
modal.el.classList.add(modal.CLASSES.SHOW);
modal.isVisible = true;
},
hide() {
modal.el.classList.remove(modal.CLASSES.SHOW);
modal.isVisible = false;
},
addEvents() {
modal.removeEvents();
modal.el.addEventListener('click', modal.eventHandlers.onModalClick);
window.addEventListener('click', modal.eventHandlers.onWindowClick);
},
removeEvents() {
modal.el.removeEventListener('click', modal.eventHandlers.onModalClick);
window.removeEventListener('click', modal.eventHandlers.onWindowClick);
},
eventHandlers: {
onModalClick(event) {
event.stopImmediatePropagation();
if (!event.target) {
return;
}
if (event.target.classList.contains(modal.CLASSES.CLOSE_BUTTON)) {
modal.hide();
}
},
onWindowClick(event) {
if (event.target.classList.contains(modal.CLASSES.READ)) {
modal.show();
} else {
modal.hide();
}
}
}
}
modal.initialize();
Answered By - first last
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.