0
309
ViewsOpen modal using JavaScript (not jQuery)
I'm trying to repurpose some code I obtained from Codepen. It's written using jQuery but I want to rewrite the script using JavaScript.
The original codepen (see: Codepen) shows a few ways to open a modal window using animation. I'm using the 'UNFOLDING' animation.
The Codepen uses the following jQuery:
$('.button').click(function(){
var buttonId = $(this).attr('id');
$('#modal-container').removeAttr('class').addClass(buttonId);
$('body').addClass('modal-active');
})
$('#modal-container').click(function(){
$(this).addClass('out');
$('body').removeClass('modal-active');
});
I'm trying to rewrite this as JavaScript.
I've got the modal to open with the following JavaScript:
let button = document.getElementById('start');
let body = document.body;
button.addEventListener('click', () => {
document.getElementById('modal-container').classList.add('one');
body.classList.add("modal-active");
});
BUT, I can't get it to close!
I tried the following but it doesn't work properly (compared to original Codepen):
let button2 = document.getElementById('modal-container');
button2.addEventListener('click', () => {
document.getElementById('modal-container').classList.add('out');
document.getElementById('modal-container').classList.remove('one');
body.classList.remove("modal-active");
});
Hoping someone can show me where I've gone wrong.
Thanks.
2 answers
Answer question0
Maybe try to not remove the "one" class when you click the button2
let button2 = document.getElementById('modal-container');
button2.addEventListener('click', () => {
document.getElementById('modal-container').classList.add('out');
body.classList.remove("modal-active");
});
Because when I inspect the code in the codepen, the div with the "modal-container" still has the "one" class on it when we close the modal
0
Thanks to Indana Rishi, I arrived at the following code, which, while probably not all that elegant, certainly works:
let button = document.getElementById('start');
let body = document.body;
button.addEventListener('click', () => {
document.getElementById('modal-container').classList.remove('one');
document.getElementById('modal-container').classList.remove('out');
document.getElementById('modal-container').classList.add('one');
body.classList.add("modal-active");
});
let modcon = document.getElementById('modal-container');
modcon.addEventListener('click', () => {
document.getElementById('modal-container').classList.add('out');
body.classList.remove("modal-active");
});