Question

好的，所以我将Bootstrap Tour与一个使用的项目集成在一起。基本上，一切正常，直到我显示模态，然后尝试附加一个步骤。模态自动滚动中的Bootstrap巡视不起作用。推荐链接。 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);  
}

希望它会有所帮助！

Bootstrap Tour滚动在模态中无法正常工作

2 个答案: