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 中以使它们更接近（在同一级别或在父级别) 对于您要突出显示的元素，您可能会看到突出显示正常工作。我相信这可能是图书馆的一个错误。

没有对 tour 库本身做一些摆弄，为了让它工作，我使用 '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;
    }