javascript - 带有 Bootstrap 模式和 AJAX 的 Intro.js

Question

我遇到了 intro.js 的问题。当我尝试专注于 Modal 时，它不起作用。

加载页面时，DOM 不包含 Modal，因为我们使用 AJAX 并且 Modal 包含在文本变量中，例如:

var Xhtml = '<div class="modal fade".........'

我认为问题在于加载时 div 不存在。

有人可以帮助我吗？

精度:我不能直接在页面上写Modal。

Answer 1

您可以使用 onbeforechange() 重新检查 DOM 中的元素。像这样:

introguide.onbeforechange(function(targetElement) {

  // Cycle through each step as defined in the options
  introguide._options.steps.forEach(function(value, key) {

    // Look for the element in the DOM
    var element = typeof value.element == 'string' ? document.querySelector(value.element) : value.element;

    // If the element now exists, update the items
    if (element) {
      introguide._introItems[key].element = element;
    }

  });

});

这是您修改后的 jsbin:https://jsbin.com/kisekofuma/edit?html,js,output

您可能需要对 CSS 进行一些调整才能让您的模态正常运行，但希望这对您有所帮助。