Bootstrap Tour 目标和模式不显示（传单地图）

Question

演示

Codepen

在 CODEPEN 中的地图上按全屏图标开始游览

期望的结果

bootstrap tour 元素应该出现在所有内容的顶部，同时突出显示其定位的元素。

我得到了什么

忽略红色按钮与上图的区别，内容无所谓

问题

当用户切换全屏按钮（使用leaflet fullscreen plugin）时，它会开始游览。

游览启动正常，但游览的元素没有正确响应，我的预感是它正在努力与全屏地图竞争前面的注意力。

目前，弹出框没有显示，即使在开发工具中我将它的 z-index 设置得尽可能高。深色叠加层也不会显示在全屏地图的顶部。

最后，目标没有正确突出显示。当在其他页面上使用游览检查目标时，它仍然是原始元素，但是当检查此页面上的元素时，它不是元素，而是放置在顶部的新引导 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 tour 会在选择目标元素时为其分配新类，然后将其设置为z-index: 1101

我一直在尝试将更高的 z-index 强行强制到 bootstrap tour 元素上，但没有运气 - 无论我将它们设置多高，它们都无法达到最高水平。

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

Answer 1

我查看了您的代码，这真的很奇怪，但我找到了一个解决方案： 只需添加类

.fade{
  opacity:1 !important;
}

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