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
You can achieve this , by removing event delegation and check the target on event click by using the .is() , ( compare e.target if it equals to reference btn otherwise hide popup )
See fiddle
Added snippet as your code :
also made change in the Popper
indtance 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 poper 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>
Something like this should do the trick (by checking the target when you are clicking somewhere):
$(function() {
var ref = $('.js-share-cf-btn');
var popover = $('.js-share-cf-popover');
popover.hide();
$(document).on('click', function(e) {
var target = $(e.target);
if (target.is(ref) || target.is(popover) ) {
e.preventDefault();
popover.show();
var popper = new Popper(ref, popover, {
placement: 'right',
});
}else {
popover.hide();
}
});
});
https://jsfiddle.net/e8aL9tje/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With