Question

我有一个bootstrap popover，其内容是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

Answer 1

您可以尝试删除触发器：“焦点”并应用一些自定义代码

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

Answer 2

另一个approch：

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

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

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

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，而仅直接处理元素上的事件！

单击里面时，Bootstrap popover正在关闭

3 个答案: