Open modal using JavaScript (not jQuery)

Question

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.

Indana Rishi · Accepted Answer · 2022-03-09 02:30:43Z

1

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

edited Mar 9, 2022 at 2:30

answered Mar 9, 2022 at 2:20

Indana Rishi

1063 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mekong Over a year ago

Thanks, Indana Rishi. That works. I didn't notice the 'one' class was still attached. But now, once the modal has closed, clicking again does not reopen the modal. It seems the 'system' has not reset.

Mekong Over a year ago

OK, got it working! Remove classes 'one' and 'out' before adding 'one' (again) on first button click. Maybe not elegant - but it works.

Mekong · Accepted Answer · 2022-03-09 03:53:14Z

1

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");
});

answered Mar 9, 2022 at 3:53

Mekong

4591 gold badge7 silver badges28 bronze badges

Collectives™ on Stack Overflow

Open modal using JavaScript (not jQuery)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related