Popper.js:如何在外部单击时关闭弹出窗口 [英] Popper.js: How to close popup when clicking outside
问题描述
我正在使用 Popper.js 来显示单击元素时具有类.js-share-cf-popover
的弹出式元素类别为.js-share-cf-btn
.
但是我希望仅当我在弹出窗口之外单击时才关闭弹出窗口.这是显示弹出窗口的实际代码:
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',
});
});
我在此处找到了一些东西,但我无法正常工作>
这是我的 jsfiddle
您可以通过删除事件委托并使用小提琴
将代码段添加为您的代码:
还更改了Popper
实例,您应该传递当前的单击js-share-cf-btn
,这样$(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>
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>
这篇关于Popper.js:如何在外部单击时关闭弹出窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!