Question

24

Popper.js: How to close popup when clicking outside

rated 0 times [ 31] [ 7] / answers: 1 / hits: 27809 / 6 Years ago, wed, april 4, 2018, 12:00:00

I'm using Popper.js to show a popup elment having the class .js-share-cf-popover when clicking elements with class .js-share-cf-btn.

But I want the popup to close only when I click outside of it. Here my actual code that show the popup:

var reference = $('.js-share-cf-btn');

var popover = $('.js-share-cf-popover');

popover.hide();



$(document).on('click', reference, function(e) {

  e.preventDefault();



  popover.show();



  var popper = new Popper(reference, popover, {

    placement: 'top',

  });

});

I found something here but I can't get it works

Here My jsfiddle

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bruno

Add To Favorites

Follow

Total Points: 602

Total Questions: 100

Total Answers: 111

Location: Tajikistan

Member since Sun, Aug 29, 2021

3 Years ago

bruno questions

1 Color picker from react-color doesn't work properly

Sat, Jul 11, 20, 00:00, 4 Years ago

1 React dynamically import Svg files

Sun, Jun 28, 20, 00:00, 4 Years ago

1 Change cursor on Hover in react-konva

Thu, Mar 12, 20, 00:00, 4 Years ago

1 how to check if a number is a float in javascript?

Thu, Feb 6, 20, 00:00, 4 Years ago

1 Window.print() bypass print dialog

Sat, Aug 10, 19, 00:00, 5 Years ago

View All

answered 6 Years ago roberts · Accepted Answer

You can achieve this, by removing event delegation and checking the target on event click by using the .is(), (compare e.target if it equals to the referencing button, otherwise hide the popup)

See fiddle

Added snippet as your code :

also made change in the Popper instance you should pass the current click js-share-cf-btn so the $(e.target) element

$(function() {

  var reference = $('.js-share-cf-btn');

  var popover = $('.js-share-cf-popover');

  popover.hide();



  $(document).on('click touchend', function(e) {

    var target = $(e.target);

    // ne need to reshow and recreate popper when click over popup so return;

    if(target.is(popover)) return;

    if (target.is(reference)) {

      e.preventDefault();



      popover.show();



      var popper = new Popper(target, popover, {

        placement: 'top',

      });

    }else {

      popover.hide();

    }

  });



});

body {

  background: #20262E;

  padding: 20px;

  font-family: Helvetica;

}



.section {

  background: #fff;

  padding: 20px;

  font-size: 25px;

  text-align: center;

  transition: all 0.2s;

  margin: 0 auto;

  width: 300px;

  margin-bottom: 20px;

}



.share-popover {

  background: red;

  color: white;

  padding: 10px;

}

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>



<script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js integrity=sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q crossorigin=anonymous></script>

<div class=section>

  <p>Section 1</p>

  <a href=# class=js-share-cf-btn>This is the trigger</a>

</div>



<div class=section>

  <p>Section 2</p>

  <a href=# class=js-share-cf-btn>This is the trigger</a>

</div>



<div class=section>

  <p>Section 3</p>

  <a href=# class=js-share-cf-btn>This is the trigger</a>

</div>



<div class=share-popover js-share-cf-popover>

  This is the popup

</div>