具有不同上下文相关位置的引导模式弹出窗口

引导模式弹出窗口看起来很适合我的需求(带有弹出窗口外观的模式功能): https://scruffles.github.io/BootstrapModalPopover/

我需要根据用户单击的位置在不同的位置显示弹出窗口,我认为这是一个常见的场景(如果页面上有20 x 6个元素,其中内容是动态的,则甚至不能单独定义20 x 6的弹出窗口div,这甚至是不可能的)。

问题是,一旦弹出窗口第一次显示,它就会停留在初始位置。我如何克服这一问题?这里有一个非常简单的Fiddle: http://jsfiddle.net/csabatoth/NJZLh/5/

<div class="page">
    <div data-bind="foreach: items">
        <button class="btn" data-bind="text: txt, attr: { id: refid }, click: function(data,event) { $root.displayPopover(data) }" ></button>
    </div>
</div>

<div id="dialog" class="popover">
    <div class="arrow"></div>
    <h3 class="popover-title" id="popoverTitle"></h3>
    <div class="popover-content" id="popoverContent">
    </div>
    <div style="float: right; padding: 0px 15px 15px 15px">
        <button type="button" class="btn btn-default btn-sm" data-bind="click: function(data, event) { return $root.hidePopover(); }"><i class="icon icon-remove"></i></button>
    </div>
</div>

var ViewModel = function () {
    var self = this;

    function ItemObj(id, txt, msg) {
        var self2 = this;
        self2.id= id;
        self2.txt = txt;
        self2.msg = msg;
        self2.refid = "ref" + id;
    }

    self.items = ko.observableArray([
        new ItemObj(1, "First", "blabla1"),
        new ItemObj(2, "Second", "blabla2"),
        new ItemObj(3, "Third", "blabla3"),
        new ItemObj(4, "Fourth", "blabla4")
    ]);

    self.displayPopover = function(data) {
        $('#dialog').modalPopover({
            target: '#' + data.refid,
            placement: 'bottom'
        });
        $('#popoverTitle').html("Sample " + data.txt);
        $('#popoverContent').html("Sample editable content " + data.msg);
        $('#dialog').modalPopover('show');
    }

    self.hidePopover = function() {
        $('#dialog').modalPopover('hide');
    }
}

ko.applyBindings(new ViewModel());

你可以看到我是如何为我可以绑定popover的元素动态生成id(refid)的。问题可能出现在模态popover插件中 $.fn.modalPopover ? 一旦创建了数据,它就不会重写它,因此第二次调用不会修改任何内容:

https://github.com/scruffles/BootstrapModalPopover/blob/master/src/bootstrap-modal-popover.js#L118

if (!data) $this.data('modal-popover', (data = new ModalPopover(this, options)))

如果问题是模态弹出窗口本身,我也可以修改它。