单击内部时，引导弹出窗口正在关闭答案

【问题标题】：Bootstrap popover is closing when click inside单击内部时，引导弹出窗口正在关闭
【发布时间】：2016-06-22 14:40:16
【问题描述】：

我有一个引导弹出框，它的内容是kendo Ui color picker widget。

当您单击颜色选择器小部件时，即使 trigger 选项设置为 focus，弹出框也会关闭。

为什么？如何在弹出框外单击之前保持弹出框打开？

<a id="popover" href="#">Color Picker</a>

var $kendoColorPicker = $("<div></div>").kendoFlatColorPicker({
    value: "#ffffff"
});

$("#popover").popover({
    container: "body", 
    content: $kendoColorPicker, 
    html: true, 
    placement: "bottom", 
    trigger: "focus"
});

在此处查看现场演示：jsfiddle

【问题讨论】：

只需删除 trigger: "focus" 。 Updated fiddle
不，因为我希望在您点击外部时自动关闭弹出框
使用 outsideClick="true"。这只会通过单击弹出框外部来关闭弹出框。

标签： javascript css twitter-bootstrap kendo-ui

【解决方案1】：

另一种方法：

function getContent() {
  console.log("getContent");
  return $("<div></div>")
    .kendoFlatColorPicker({
    value: "#ffffff"
  }).click(function(event) {
    event.stopPropagation();
  });
}

$("#popover").popover({
    container: "body",
    content: getContent,
    html: true,
    placement: "bottom",
    trigger: "manual"}
).click(function(event) {
  $("#popover").popover('show')
  event.stopPropagation();
})

$(document).click(function() {
  $("#popover").popover('hide')
})

jsFiddle

但由于某种原因，滑块不起作用

我认为您应该使用替代解决方案（例如“频谱”）

【讨论】：

【解决方案2】：

这里是user1119279's answer 的稍微简化和概括的版本：

jQuery(function ($) {
  $("[data-toggle='popover']").popover({trigger: "click"}).click(function (event) {
    event.stopPropagation();

  }).on('inserted.bs.popover', function () {
    $(".popover").click(function (event) {
      event.stopPropagation();
    })
  })

  $(document).click(function () {
    $("[data-toggle='popover']").popover('hide')
  })
})

此版本还保留了多次单击触发按钮切换弹出框的行为。

【讨论】：

超级干净并减轻其他答案中的所有跳跃和随机粘性弹出窗口。
这将禁用任何所需的弹出框点击，就像里面的按钮一样。

【解决方案3】：

我发现最好的原生解决方案是使用trigger="manual" 并处理blur 事件。

代码如下：

$("#popover").popover({
  content: '<button>Click Me And Not Close The Popup</button>',
  html: true,
  trigger: "manual",
  // other options
}).on('blur', function(ev) { // keep shown when focus on child of popover
  if (!$(ev.relatedTarget).parent().is('#popover')) {
    $('#popover').popover('hide');
  }
  // if you have multiple inputs in popover that can be focused, use
  // $(ev.relatedTarget).one('blur', callback)
  // to make popover hide after it blur
}).on('click', function() {
  $('#popover').popover('toggle');
  // or always show: $('#popover').popover('show')
})

在本例中，document 不会被使用，而是直接处理元素上的事件！

【讨论】：

这是救命稻草 :)

【解决方案4】：

您可以尝试移除 trigger:"focus" 并应用一些自定义代码

$(document).mouseup(function (e) {
    var container = $(".popover");

    if (!container.is(e.target)  && container.has(e.target).length === 0)  {
        container.popover("hide");
    }
 })

【讨论】：