无法关闭 bootstrap 外部点击时带有动态内容的弹出窗口 - jquery
Cannot close bootstrap popover with a dynamic content on outside click - jquery
我这里有一个带有动态内容的弹出窗口,当我单击弹出窗口按钮时会显示该内容。当我还单击页面的另一个区域时,我想关闭它。但是,弹出窗口仅在我单击弹出按钮时关闭。
<a class="btn btn-danger" id="btn-post" data-html="true" data-placement="bottom" data-original-title="Post/Lock">
Post/Lock
</a>
我没有在我的 HTML 代码上设置 data-content
。我设置在js
$("#btn-post").click(function() {
$("#btn-post").attr("data-content", var_dynamic_content);
$('#btn-post').popover('show');
});
我已尝试遵循此 post
中回答的一些代码
How to dismiss a Twitter Bootstrap popover by clicking outside?
但似乎没有什么对我有用。
试试这个代码:
$('body').click(function() {
$('#btn-post').popover('hide');
});
这个答案确实与您在问题中提到的答案相似...除了它是针对 Twitter 的 -Bootstrap (Bootstrap 4)。
不同的是好像没有in
class.
我没有针对所有用例对其进行测试...但是这个片段有效。
$(document).ready(function(){
var var_dynamic_content = "Hello!";
$("#btn-post").click(function() {
$("#btn-post").attr("data-content", var_dynamic_content);
$('#btn-post').popover('show');
});
$(document).click(function(e){
// If the click occurs on #button-post or the popover itself --> exit!
if(e.target == $("#btn-post")[0] || $(e.target).parents(".popover").length > 0){return;}
$('#btn-post').popover('hide');
});
}); // END ready
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<a class="btn btn-danger" id="btn-post" data-html="true" data-placement="bottom" data-original-title="Post/Lock">
Post/Lock
</a>
我这里有一个带有动态内容的弹出窗口,当我单击弹出窗口按钮时会显示该内容。当我还单击页面的另一个区域时,我想关闭它。但是,弹出窗口仅在我单击弹出按钮时关闭。
<a class="btn btn-danger" id="btn-post" data-html="true" data-placement="bottom" data-original-title="Post/Lock">
Post/Lock
</a>
我没有在我的 HTML 代码上设置 data-content
。我设置在js
$("#btn-post").click(function() {
$("#btn-post").attr("data-content", var_dynamic_content);
$('#btn-post').popover('show');
});
我已尝试遵循此 post
中回答的一些代码How to dismiss a Twitter Bootstrap popover by clicking outside?
但似乎没有什么对我有用。
试试这个代码:
$('body').click(function() {
$('#btn-post').popover('hide');
});
这个答案确实与您在问题中提到的答案相似...除了它是针对 Twitter 的 -Bootstrap (Bootstrap 4)。
不同的是好像没有in
class.
我没有针对所有用例对其进行测试...但是这个片段有效。
$(document).ready(function(){
var var_dynamic_content = "Hello!";
$("#btn-post").click(function() {
$("#btn-post").attr("data-content", var_dynamic_content);
$('#btn-post').popover('show');
});
$(document).click(function(e){
// If the click occurs on #button-post or the popover itself --> exit!
if(e.target == $("#btn-post")[0] || $(e.target).parents(".popover").length > 0){return;}
$('#btn-post').popover('hide');
});
}); // END ready
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<a class="btn btn-danger" id="btn-post" data-html="true" data-placement="bottom" data-original-title="Post/Lock">
Post/Lock
</a>