Close modal on the outside click

programming web dev
1

Hello, Kirupa members.
I need your help.
I have 2 modals on my site ( https://coursuit.netlify.app/ ) You can find them on the right side of the header - “Login modal” (press “Login” button) and “Normal modal” (press “Get Started Button”).

I can close the “Normal modal” on the outside click.
Here is the code:

var btns = document.querySelectorAll(".open-it, .btn-modalclose");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function (e) {
        let modal = document.querySelector('.modal')
        modal.classList.toggle('show-modal');
        window.addEventListener('click', e =>
        e.target == modal? modal.classList.remove('show-modal') : false)
        e.preventDefault();
    });
}

But, I can’t close the “Login modal” on the outside click.
Here is the code:

const openModalLogin = document.getElementById('open-modallogin');
const modal_login = document.getElementById('modal-login');
const login_close = document.getElementById('login-close');

openModalLogin.addEventListener('click', () =>
   modal_login.classList.add('visible'),
);
login_close.addEventListener('click', () =>
   modal_login.classList.remove('visible'),
);
window.addEventListener('click', e =>
   e.target == modal_login ? modal_login.classList.remove('visible') : false);

Could you, please, take a look and tell me what is wrong with the “Login modal” and how can I fix it. Can’t figure it out, the code looks the same to me.

Thank you very much in advance for your help.

2

Hi @Helena_G - you’ve run into my personal gripe with the modal capabilities we have natively. Dismissing a modal by clicking outside of the modal area is too difficult to make work.

The main difference is that with Get Started, the modal takes up all available space on the page. This ensures clicking on the empty area catches the appropriate code and closes. Your Login modal only takes up as much space as needed:

image
image3248×1942 584 KB

If you have a background element on your log-in modal that mimics the same behavior as Get Started where it takes up all available space, your dialog should close appropriately. Hopefully :slight_smile:

3

Hi, @kirupa Thank you very much for your answer.
I’m not sure I understand how to mimic this behaviour.
Could you, please, give a hint.

Thank you very much in advance :slight_smile:

4

Is this HTML something you have full control over, is it being generated by a CMS?

5

@kirupa I have the total control of it.

6

Apologies for my delay on this. Were you able to get it resolved?

7

@kirupa No. I have the same issue very often when I create a similar modal.
And each time I can’t figure out how to close it on outside click.
So, I would be very thankful to get a solution.
Thank you very much in advance :slight_smile:

8

This is going to be a bit hacky, but it hopefully gets you looking in the right direction. The gist is that the top-level element in the modal needs to be 100% of the width. It is this element that detects the click and hides the modal. The contents of the modal are what need to be customized for the type of modal we are dealing with. In this case, the modal needs to be right-aligned.

With all that said, here are the CSS-only changes I made to make this work:

.modal-login.visible {
  display: grid;
  justify-content: end;
  grid-template-rows: auto 100%;
}
.modal-login__main {
  padding: 100px 0 0 28px;
  background-color: #2E36CB;
}
.modal-login__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 88px;
  padding: 28px 32px;
  background-color: #2E36CB;
  width: 500px;
}

Here is a video of this in action:

9

Hi, @kirupa Thank you very much for your answer.
Actually, I tried to fix it a lot of times with the code that you gave me.
But, it doesn’t work.

Could you, please, take a look. What is wrong with my code ?

.modal-login.visible {
    display: grid;
    justify-content: end;
    grid-template-rows: auto 100%;
}

.modal-login {
    position: fixed;
    top:0;
    right: 0;
    z-index: 999;
    width: 500px;
    height: 100vh;
    background-color: #2E36CB;
    padding-top: 30px;
    display: none;


    &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 88px;
        padding: 28px 32px;
        background-color: #2E36CB;
        width: 500px;

        p {
            font-size: 30px;
            letter-spacing: 2px;
            color: $color-3;
        }
    }
    .btn-loginclose {
        img {
            width: 30px;
            margin-right: 10px;
        }
    }

    &__main {
        padding: 100px 0 0 28px;
        background-color: #2E36CB;
    }
    &__footer {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 56px;
        background-color: $color-3;
        color: $color-2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

}

I’ve only added the code that you gave me to the existing code.
Thank you very much in advance.