Hopscotch.js,动态创建的模态目标不起作用

时间:2013-09-19 14:30:51

标签: javascript linkedin

我正在使用linkedIn的Hopscotch。

我想向模态弹出窗口显示一个气泡,但是跳房子似乎跳过了模态的步长。

我的猜测是,当游览对象初始化时,问题与跳房子目标不存在有关,因为模式显示在游览步骤的“onNext” - 事件上。我已经尝试将实际对象和id-selector作为“target” - 属性。我无法上班。

一个极端的选择可能是制作两个不同的游览,并在第一个的onEnd事件中显示模态,等到模态渲染完成,然后显示“下一个”游览。但在诉诸这种奇怪之前,我想找到一个简洁的解决方案。

2 个答案:

答案 0 :(得分:7)

我有同样的问题,所以我添加了一个方法来刷新下一步目标元素:

/**
 * getCurrTarget
 *
 * @return {Object} The currently visible target.
 */
 {some code...}


 /**
 * setNextTarget   
 * @ Refresh the target dom element for the next step
 */
 this.setNextTarget = function(el) {
  currTour.steps[currStepNum+1].target = el;
 };

然后我像这样使用它:

 {step 1 code...}
 onShow:function(){
   hopscotch.setNextTarget($("#myStep2Target")[0]);                         
 }

不是最好的方法,但要快点......希望它有所帮助;)

答案 1 :(得分:1)

要在每次游览时让跳房子来解决动态目标,你可以简单地克隆游览定义,即

hopscotch.startTour($.extend(true, {}, tour));