How can I close layer popup when I click background or button?

Question

The scenario is as follows.

Default Status (no layer popup)
When I click the button, layer popup shows.
Click the button or outside, layer popup will be hide.

I want to close the layer popup when I click background(outside) or button.

How can I do with Vanilla JS or jquery? (based on HTML)

I would appreciate it if you could answer.

like this post? https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it , or you can see thid fiddle http://jsfiddle.net/LCB5W/ — frankfurt, Oct 27 '21 at 06:13

score 1 · Answer 1 · answered Oct 27 '21 at 04:46

1

When you open the popup attach a click listener to body that closes it and removes the listener.

answered Oct 27 '21 at 04:46

ray

26,557
5
28
27

score 1 · Answer 2 · answered Oct 27 '21 at 04:52

You can use this code

//use by id

document.getElementById(#id).style.display = 'block';
document.getElementById(#id).style.display = 'none';

//use by className 



document.getElementById(.className).style.display = 'none';
document.getElementById(.className).style.display = 'block';

or use jQuery

$(document).ready(function(){
       $("#id").click(function(event){
         // $("#id").toggle();
         // $("#id").hide();
         // $("#id").show();
       });
     });

score 0 · Answer 3 · answered Oct 27 '21 at 04:52

0

Set id for your layer in HTML part like id="layerPopup" Then on your JS code create event for your button

$(document).on('click', '#btnId', function(){ 
    $("#layerPopup").hide();

});

answered Oct 27 '21 at 04:52

Freedom Rider

27
1
8

score 0 · Answer 4 · answered Oct 27 '21 at 05:02

You should appear a overlay which will cover the whole body, and give it css property z-index to lower from the button, and when apply click function on it same as my code

HTML

<div class="overlay"></div>

CSS

.overlay{
   background-color: transparent;
   inset: 0;
   position: fixed;
   z-index: 100;
   display: none;
}

button{
 z-index: 101;
}

JQuery

$('button').click(function(){
    $('.overlay, popup').toggle();
});

$('.overlay').click(function(){
    $('.overlay, popup').hide();
});

score 0 · Answer 5 · answered Oct 27 '21 at 05:11

One standard way to handle such scenario is to have a backdrop div behind the popup and then add an event listener to it. You may choose to change backdrop's background color to increase pop up aesthetics visibly.

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  background: rgba(0, 0, 0, 0.75);
}

.modal {
  position: fixed;
  top: 30vh;
  left: 10%;
  width: 80%;
  z-index: 100;
  overflow: hidden;
}

<div class="backdrop" />
<div class="modal" />

And then you can add an event listener on backdrop:

$(document).on('click', '.backdrop', function(){ 
    $(".modal").hide();
});

PS: There may be some syntax issues!

How can I close layer popup when I click background or button?

5 Answers5