带背景的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");
}

Answer 2

而不是onShown：您可以添加'backdropContainer: '.parent class of the item you highlited'，如下所示。当你在多种情况下遇到这些奇怪的问题时，这很有用。

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",
            backdropContainer: '.Parent class name of #keyword-dropdown'
        }
        ]
    }).init().start(true);

Answer 3

将此添加到您的CSS：

    .popover, 
    .popover.tour,
    .tour-backdrop,
    .tour-step-background {
        z-index: 1;
    }