# Close modal on the outside click

**URL:** <https://forum.kirupa.com/t/close-modal-on-the-outside-click/652894>\
**Category:** web dev\
**Created:** [July 31, 2022, 8:09pm UTC](https://forum.kirupa.com/t/close-modal-on-the-outside-click/652894 "2022-07-31T20:09:46Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [July 31, 2022, 8:09pm UTC](https://forum.kirupa.com/t/close-modal-on-the-outside-click/652894/1 "2022-07-31T20:09:46Z")

</div>

Hello, Kirupa members.  
I need your help.  
I have 2 modals on my site ( [https://coursuit.netlify.app/](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:

```auto
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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 31, 2022, 9:12pm UTC](https://forum.kirupa.com/t/close-modal-on-the-outside-click/652894/2 "2022-07-31T21:12:58Z")

</div>

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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/8/68e11a8c83f130b36967e1f65b0046e99b3eaa41.jpeg)

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 🙂

---

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [August 2, 2022, 4:24pm UTC](https://forum.kirupa.com/t/close-modal-on-the-outside-click/652894/3 "2022-08-02T16:24:50Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 3, 2022, 7:46pm UTC](https://forum.kirupa.com/t/close-modal-on-the-outside-click/652894/4 "2022-08-03T19:46:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [August 3, 2022, 10:03pm UTC](https://forum.kirupa.com/t/close-modal-on-the-outside-click/652894/5 "2022-08-03T22:03:20Z")

</div>

@kirupa I have the total control of it.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 6, 2022, 5:20pm UTC](https://forum.kirupa.com/t/close-modal-on-the-outside-click/652894/6 "2022-08-06T17:20:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [August 6, 2022, 6:31pm UTC](https://forum.kirupa.com/t/close-modal-on-the-outside-click/652894/7 "2022-08-06T18:31:58Z")

</div>

@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 🙂

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 8, 2022, 3:46am UTC](https://forum.kirupa.com/t/close-modal-on-the-outside-click/652894/8 "2022-08-08T03:46:42Z")

</div>

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:

```auto
.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:

[![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/c/7/c752996f52b396c3b20def21f11422d813396508.jpeg "Repro of Hiding Modal") ](https://www.youtube.com/watch?v=IpdJqccW_cs)

---

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [August 22, 2022, 8:13am UTC](https://forum.kirupa.com/t/close-modal-on-the-outside-click/652894/9 "2022-08-22T08:13:49Z")

</div>

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 ?

```auto
.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.