演示
在 CODEPEN 中的地图上按全屏图标开始游览
期望的结果
bootstrap tour 元素应该出现在所有内容的顶部，同时突出显示它的目标元素。
我得到了什么
忽略红色按钮与上图的区别，内容无关紧要
问题
当用户切换全屏按钮（使用传单全屏插件）时，它会开始游览。
巡演运行良好，但巡演的元素没有正确响应，我的预感是它正在努力与全屏地图竞争，以吸引前面的注意力。
目前，弹出框没有显示，即使在开发工具中我把它的 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);
}
我的理解是，引导程序在选择目标元素时为其分配新类，然后将其设置为z-index: 1101
我一直试图将更高的 z-index 强行强制到 bootstrap tour 元素上，但没有运气 - 无论我将它们设置多高，它们都没有达到最高水平。
我还强制将地图设置为z-index: 100 !important，并且仍然覆盖到顶部 - 尽管在开发工具中仍然显示为z-index: 100 !important
任何想法/建议都会很棒。