javascript - 使引导弹出窗口出现在与其触发器不同的元素上

Question

我试图让一个“NEXT”按钮创建不同的弹出框（弹出框 1、2、3 等...）：每个弹出框都应该附加到页面上的不同 div。

我们正在尝试创建“Take a Tour”功能，其中不同的功能由不同的弹出窗口解释。

Answer 1

手动显示/隐藏您的弹出窗口。

单击“下一步”按钮，按顺序显示和隐藏弹出框：

var currentPopover = -1;
var popovers = [];

// Initialize all the popovers to be "manually" displayed.
popovers.push($("#ctrl1").popover({ trigger: 'manual' }));
popovers.push($("#ctrl2").popover({ trigger: 'manual' }));
popovers.push($("#ctrl3").popover({ trigger: 'manual' }));

// On each button click, hide the currently displayed popover
// and show the next one.
$("#NextBtn").click(function() {
  if (currentPopover >= 0) {
    popovers[currentPopover].popover('hide');
  }

  currentPopover = currentPopover + 1;
  popovers[currentPopover].popover('show');
});

上述代码尚未编译或测试。