无法在外部单击时关闭带有动态内容的引导弹出窗口 - jquery

Posted

技术标签:

【中文标题】无法在外部单击时关闭带有动态内容的引导弹出窗口 - jquery【英文标题】:Cannot close bootstrap popover with a dynamic content on outside click - jquery 【发布时间】:2018-12-27 01:18:07 【问题描述】:

我在这里有一个带有动态内容的弹出框,当我单击弹出框按钮时会显示该弹出框。当我还单击页面的另一个区域时,我想关闭它。但是,仅当我单击弹出框按钮时弹出框才会关闭。

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

我已经尝试按照这篇文章中回答的一些代码

How to dismiss a Twitter Bootstrap popover by clicking outside?

但似乎没有什么对我有用。

【问题讨论】:

【参考方案1】:

此答案与您在问题中提到的答案确实相似...除了它适用于 Twitter-Bootstrap (Bootstrap 4)。

区别好像是没有in类。

我没有对所有用例进行测试...但是这个 sn-p 有效。

$(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>

CodePen

【讨论】:

你的答案是完美的。好在弹出框仅在外部单击时关闭,而不是按钮和弹出框本身,这正是我所需要的。【参考方案2】:

试试这个代码:

$('body').click(function() 
    $('#btn-post').popover('hide');
);

【讨论】:

以上是关于无法在外部单击时关闭带有动态内容的引导弹出窗口 - jquery的主要内容,如果未能解决你的问题,请参考以下文章

来自 Laravel 循环的引导弹出窗口

带有文本区域的引导弹出窗口:无法水平调整大小

防止在外部单击时以弹出模式关闭单元格编辑器

我可以动态更改引导弹出窗口标题样式吗

容器移动时的引导弹出位置

处理引导弹出窗口 html 内容内的按钮单击