javascript - 带背景的 Bootstrap 之旅使行为变得奇怪

Question

我正在使用 Twitter Bootstrap Tour 进行网络浏览。

这是初始化它的javascript:

    var tour = new Tour({
        backdrop: true,
        steps: [
        {
            element: "#keyword-link",
            title: "Title of my step",
            content: "Content of my step"
        },
        {
            element: "#keyword-dropdown",
            title: "Title of my step",
            content: "Content of my step"
        }
        ]
    }).init().start(true);

目前我只是在每个步骤中使用测试内容。我正在尝试获得他们自己网站上显示的背景效果:http://bootstraptour.com/

然而，这是我取得的结果:

这是没有背景的样子:

您可以看到非阴影部分完美地遮盖了 HTML，但它的不透明度太高，您看不到任何未遮盖的内容。这有什么原因吗？我该如何解决？

我无法从 JSFiddle 中重现任何类型的背景。

Answer 1

我在尝试使用以嵌套在 DOM 深处的元素为目标的步骤设置导览时遇到了同样的问题。

如果您在 Chrome 开发工具中查看 DOM 并找到两个叠加元素“tour-backdrop”和“tour-step-background”并将它们拖到 DOM 中，使它们更靠近(在同一层或在父级别)到您要突出显示的元素，您可能会看到突出显示工作正常。我相信这可能是图书馆的一个错误。

在不对游览库本身进行任何改动的情况下，为了让它正常工作，我使用受影响步骤的“onShown”方法将叠加元素移动到 DOM 中的功能位置，如下所示:

onShown: function() {
    $(".tour-backdrop").appendTo(".pContainer");
    $(".tour-step-background").appendTo(".pContainer");
    $(".tour-step-background").css("left", "0px");
}