点击 Bootstrap 弹出框内部导致弹出框关闭

Question

我有一个Bootstrap的弹出框，并且其内容是Kendo UI颜色选择器小部件。

当您在颜色选择器小部件中单击时，弹出框会关闭，即使将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"
});

See a live demo here : jsfiddle

- Below the Radar

---

只需删除 trigger: "focus" 即可。更新的 fiddle - Pugazh

不行，因为我希望当你在弹出窗口外面点击时，它可以自动关闭。 - Below the Radar

使用 outsideClick="true"。这将只通过在弹出窗口外部单击来关闭弹出窗口。 - jxStackOverflow

Answer 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

由于某些原因，滑块不起作用了。

我认为你应该使用另一种解决方案（例如"spectrum"）。

- user1119279

Answer 2

这是稍微简化且通用化的user1119279的答案版本:

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

这个版本还保留了多次点击触发按钮以切换弹出框的行为。

- antak

---

超级干净，可以缓解其他答案中所有跳跃和随机粘性弹出窗口的问题。 - skrile

这会禁用弹出窗口内部像按钮这样需要点击的任何元素。 - Aadam

Answer 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并直接处理元素上的事件！

- 呂學洲

---

这真是救命稻草 :) - pesho hristov

Answer 4

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

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

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

- roraima