twitter-bootstrap - BootstrapTour 滚动在模态中无法按预期工作

Question

好的，所以我正在将 Bootstrap Tour 与使用的项目集成。基本上，一切正常，直到我显示一个模态然后尝试附加一个步骤。模态自动滚动中的引导程序浏览不起作用。参考链接。https://github.com/sorich87/bootstrap-tour/issues/350

Answer 1

您可以使用 bootstrap tour 的容器。当您使用它时，滚动问题将得到解决。您可以将 modal 的 id 赋予容器属性。

例子：

var tour = new Tour({
  container: '#insertCustomerModal'
  steps: [
  {
    element: "#my-element",
    title: "Title of my step",
    content: "Content of my step"
  },
  {
    element: "#my-other-element",
    title: "Title of my step",
    content: "Content of my step"
  }
]});

Answer 2

很好的结果：

var _bootstraptour=null;

function start_tour(){
_bootstraptour = new Tour({
    container:$("#div_scrollable")
    ...
    ,template: "<div id=... style='...position: relative;'>"
    ...

添加步骤时：

step.element=$('#element');
step.onPrev= function () {
    var step_prev=_bootstraptour.getStep(step.index-1);
    tour_scrollTo_step(step_prev);
}
step.onNext= function () {
    var step_next=_bootstraptour.getStep(step.index+1);
    tour_scrollTo_step(step_next);
}
...



function tour_scrollTo_step(step){
    var parent=$("#div_scrollable");
    var scrollTop=parent.scrollTop() + ($(step.element).position().top - parent.position().top) - (parent.height()/2)+parent.position().top
    parent.scrollTop(scrollTop);  
}

希望它会有所帮助！