javascript - Bootstrap Tour 目标和模式未显示(传单 map )

Question

演示

Codepen

按 CODEPEN map 上的全屏图标即可开始游览

期望的结果

引导游览元素应出现在所有内容的顶部，并突出显示其目标元素。

我得到了什么

忽略红色按钮与上图相比的差异，内容并不重要

问题

当用户切换全屏按钮(使用 leaflet fullscreen plugin )时，它将开始游览。

游览激活正常，但游览的元素没有正确响应，我的预感是它正在努力与全屏 map 竞争以吸引前方的注意力。

目前，即使在开发工具中我将其 z 索引设置得尽可能高，弹出窗口也不会显示。深色叠加层也不会显示在全屏 map 的顶部。

最后，目标没有正确突出显示。当在游览工作的情况下检查其他页面上的目标时，它仍然是原始元素，但是当检查此页面上的元素时，它不是元素，而是放置在顶部的新引导 div。不知道为什么它不以同样的方式工作。

我尝试过的

旅游代码

//Bootstrap tour
function takeTour() {
  console.log("Taking tour");
  ("use strict");
  // Instance the tour
  var tour = new Tour({
    name: "leafletTour",
    storage: false,
    steps: [
      {
        element: "#custom-control",
        title: "One Stop Tour",
        content: "There is only one stop in this tour",
        placement: "right"
      }
    ],
    backdrop: true
  });
  tour.init();
  tour.start(true); 
}

我的理解是， Bootstrap 游览会在选择目标元素时为其分配新类，然后将其设置为 z-index: 1101

我一直在尝试将更高的 z-index 强行添加到引导游览元素上，但运气不佳 - 无论我将它们设置多高，它们都无法达到顶级水平。

我还强制 map 为 z-index: 100 !important，并且仍然覆盖到顶部 - 尽管在开发工具中仍然显示为 z-index: 100 !重要 任何想法/建议都会很棒。

Answer 1

我已经检查了你的代码，它真的很奇怪，但我找到了一个解决方案: 只需添加类

.fade{
  opacity:1 !important;
}

在这里您可以找到工作示例。 https://codepen.io/anon/pen/MveMrL