J'utilise Popper.js pour afficher un élément contextuel ayant la classe .js-share-cf-popover
lorsque vous cliquez sur des éléments avec la classe .js-share-cf-btn
.
Mais je veux que le popup ne se ferme que lorsque je clique en dehors. Voici mon code actuel qui affiche le 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',
});
});
J'ai trouvé quelque chose ici mais je ne peux pas le faire fonctionner
Voici mon jsfiddle
Vous pouvez y parvenir, en supprimant la délégation d'événement et en vérifiant la cible sur le clic d'événement en utilisant . Is () , (comparez e.target s'il est égal à référence btn sinon masquez le popup)
Voir violon
Extrait ajouté comme code:
vous avez également modifié l'indentation Popper
, vous devez transmettre le clic actuel js-share-cf-btn
afin que l'élément $(e.target)
$(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>
Quelque chose comme ça devrait faire l'affaire (en vérifiant la cible lorsque vous cliquez quelque part):
$(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();
}
});
});
Pour ceux qui utilisent React, j'ai créé un résumé d'un HOC que vous pouvez attacher à n'importe quel composant pour le fermer lorsque vous cliquez dessus:
https://Gist.github.com/elie222/850bc4adede99650508aba2090cd5da1