Question

我正在使用bootstrap pop over来显示表单。流行音乐即将到来。但它不允许在其中输入任何值，当链接的焦点结束时，叠加层正在隐藏。

有没有解决这个问题。我想保持流行音乐，直到我的焦点不再流行。

要求：

在链接焦点上，应显示弹出窗口。
它应该允许我输入表单元素。
如果焦点已从表单中删除，则表单应该隐藏。

这是我试过的：

JS：

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        }
    });
});

Demo Link

Answer 1

你需要在JS上做两件简单的事情（下面提到的最终代码） Fiddle updated

为您的弹出功能添加延迟
然后覆盖默认的mouseleave和mouseover事件，添加几行代码。

最终更新的JS代码 -

$(function(){
    //added
    var originalLeave = $.fn.popover.Constructor.prototype.leave;
    $.fn.popover.Constructor.prototype.leave = function(obj){
      var self = obj instanceof this.constructor ?
          obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
      var container, timeout;

      originalLeave.call(this, obj);

      if(obj.currentTarget) {
        container = $(obj.currentTarget).siblings('.popover')
        timeout = self.timeout;
        container.one('mouseenter', function(){
          //We entered the actual popover – call off the dogs
          clearTimeout(timeout);
          //Let's monitor popover content instead
          container.one('mouseleave', function(){
            $.fn.popover.Constructor.prototype.leave.call(self, self);
          });
        })
      }
    };

    $("[data-toggle=popover]").popover({
        html : true,
        delay: {show: 50, hide: 400}, //added
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        }
    });

});

如何在表单填充之前保持Bootstrap弹出启用？

1 个答案: