gpt4 book ai didi

javascript - Popper.js:单击外部时如何关闭弹出窗口

转载 作者:可可西里 更新时间:2023-11-01 02:08:22 24 4
gpt4 key购买 nike

我正在使用 Popper.js当单击具有类 .js-share-cf-btn 的元素时显示具有类 .js-share-cf-popover 的弹出元素。

但我希望仅当我在其外部单击时弹出窗 Eloquent 关闭。这是我显示弹出窗口的实际代码:

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',
});
});

我找到了一些东西 here但我无法让它工作

这是我的 jsfiddle

最佳答案

您可以通过删除事件委托(delegate)并使用 .is() 检查事件点击时的目标来实现此目的。 ,(比较e.target是否等于引用按钮,否则隐藏弹窗)

参见 fiddle

添加片段作为您的代码:

还对 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 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>

关于javascript - Popper.js:单击外部时如何关闭弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49647386/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com