Home > OS >  how to close popup by clicking outside popup and how to remove class on clicking outside popup
how to close popup by clicking outside popup and how to remove class on clicking outside popup

Time:05-11

I used some random tutorial to add popup to my webpage. Is there a way to make it so a popup closes when you click outside it/click on a different one.

I've tried adding an id close to a div outside popup but it closes the popup when clicked inside the popup also, Can i get some help

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body style="text-align:center">
    <h2>Popup</h2>
    <a  id="open" href="javascript:void(0)">Show</a>
      <!--  model popup start  -->
    <div  id="modalContainer">     
        <div >
        </div>         
    </div>
  </body>
</html>

basic model popup css

<style>
a.show-cta{
    background-color: #ea1420;
    color: #fff;
    padding: 6px 15px;
    display: inline-block;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 550;
    font-size: 16px;
    margin-top: 15px; 
    text-decoration: none;

}

.modal-container{
    background-color: rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    pointer-events: none;
    opacity: 0;
}
.modal-container.show{
    pointer-events: auto;
    opacity: 1;
}
.modal{
    background-color: #fff;
    width: 85rem;
    height: 470px;
    box-shadow: 0 .2rem .4rem rgba(0, 0, 0, .2);    
}

</style>

How to remove class 'show' by clicking outside popup.

<script>

window.onclick=function(){
 
 const open = document.getElementById('open');
 const modalContainer = document.getElementById('modalContainer');
 const close = document.getElementById('close');
```
 
 open.addEventListener('click', () => {
     modalContainer.classList.add('show');
 });
 
 close.addEventListener('click', () => {
      modalContainer.classList.remove('show');                 
 });
}

</script>

CodePudding user response:

You can add addEventListener on the modal-container and raise the z-index of the modal

CodePudding user response:

    $('#modalContainer').on('click', function(e) {
  if (e.target !== this)
    return;
    $('#modalContainer').remove()
});
  • Related