带背景的 Bootstrap 巡回演出，表现奇怪答案

【问题标题】：Bootstrap tour with backdrop enabled acting strange带背景的 Bootstrap 巡回演出，表现奇怪
【发布时间】：2015-03-07 09:55:01
【问题描述】：

我正在使用 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 中重现任何类型的背景。

【问题讨论】：

标签： javascript twitter-bootstrap twitter-bootstrap-3 bootstrap-tour

【解决方案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");
}

【讨论】：

@Mat 非常感谢。您的声明已保存！！ -> " 如果你在 Chrome 开发工具中查看 DOM 并找到两个覆盖元素 'tour-backdrop' 和 'tour-step-background' 并将它们拖到 DOM 中，使它们更接近（在同一级别或在父级别）到您要突出显示的元素，“工作正常。

【解决方案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);

【讨论】：

【解决方案3】：

将此添加到您的 CSS：

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

【讨论】：