how to close popup by clicking outside popup and how to remove class on clicking outside popup

Question

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 class="show-cta" id="open" href="javascript:void(0)">Show</a> <!-- model popup start --> <div class="modal-container" id="modalContainer"> <div class="modal"> </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>

Answer 1

您可以在modal-container上添加addEventListener并提高模modal的z-index

Answer 2

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

how to close popup by clicking outside popup and how to remove class on clicking outside popup

Question

2 answers

solution1
0 2022-05-11 07:49:01

solution2
0 2022-05-11 08:05:01

how to close popup by clicking outside popup and how to remove class on clicking outside popup

Question

2 answers

solution1 0 2022-05-11 07:49:01

solution2 0 2022-05-11 08:05:01

solution1
0 2022-05-11 07:49:01

solution2
0 2022-05-11 08:05:01