如何让 Bootstrap Tour 使用 jQuery 对话框？

Question

基本上我可以让Bootstrap Tour 使用最基本的示例，但是当在 jQuery 对话框中定位一个元素时，突出显示会覆盖该元素。

var t = new Tour({
    backdrop: true
});

t.addStep({
    element: "#content",
    title: "Title",
    content: "Content"
});

t.start();

这是jsFiddle example 我的意思。

高亮元素应该在目标元素的后面，这样文本仍然可见。

我认为问题在于元素的 z-index。它应该是对话框 -> 突出显示 -> 元素，但它看起来像是对话框 -> 元素 -> 突出显示。

对话框的z-index为100，高亮为1010，元素为1011，我认为应该是正确的。

我可以通过显式删除 .ui-front jQuery UI 类上的 z-index 来使其工作，但这似乎不是最好的解决方案。

如果 z-index 正确，为什么默认样式不起作用？

Answer 1

正确的 jsfiddle 与最新版本的引导程序一起使用

[http://jsfiddle.net/KyleMit/DYNbj/82/][1]

Answer 2

我遇到了问题，我通过将 tour-step-background 的不透明度设置为 0.4 来作弊

Answer 3

问题在于jQuery-UI Dialog 已经创建了一个新的堆叠上下文，因此对#content 元素的z-index 的更改只会相对于它当前的堆叠上下文显示。

为了证明，添加以下 css，您仍然会看到#content div 显示在对话框的上方，其中包含z-index 的100。 --> 即 Z 索引不是绝对的！ ... jsFiddle

#content { z-index: 0 !important; }

---

来自What No One Told You About Z-Index：

每个堆叠上下文都有一个 HTML 元素作为其根元素。当在元素上形成新的堆叠上下文时，该堆叠上下文将其所有子元素限制在堆叠顺序中的特定位置。这意味着如果一个元素包含在堆叠顺序底部的堆叠上下文中，则无法让它出现在堆叠顺序更高的不同堆叠上下文中的另一个元素之前，即使使用z-index 十亿！

可以通过以下三种方式之一在元素上形成新的堆叠上下文：

• 当一个元素是文档的根元素（元素）时
• 当元素具有非静态的位置值和非自动的 z-index 值时
• 当元素的不透明度值小于 1 时

---

问题是Bootstrap Tour 并没有很好的识别方法。当他们开始对某个元素进行游览时，他们会应用：

• 全屏黑色tour-backdrop，z-index 为1009，
• 对象后面的白色tour-step-background，z-index 为1010
• 并将 z-index 应用于1011 的当前游览元素

...但是最后一个z-index 没有效果，因为我们的对象已经在堆栈上下文中。它只是位于该堆栈中的任何其他元素（它已经是）的上方。顺便说一句，这就是为什么从 ui-front 中删除 z-index 会导致正确的外观，因为它会将元素从当前堆栈中释放出来。

---

这是 Bootstrap Tours应该做的，我们将手动操作 DOM。

问题是他们试图通过 z-indexes 相对于彼此定位元素，但只要游览对象处于不同于 .tour-step-background 和 .tour-backdrop 的堆叠上下文中，这就会失败。

解决方案？将您生成的元素放在同一个堆叠上下文中！

这是一个简化的标记树

• 身体
  • 游览背景（通常放在这里）
  • 新的堆叠上下文
    • 游览对象
    • 游览背景（应该去这里）

要覆盖这一点，我们将插入到 tours onShown 方法并自己移动背景：

在 JavaScript 中，创建游览时，我们将执行以下操作：

var t = new Tour({
    backdrop: true,
    onShown: function(tour) {
        var stepElement = getTourElement(tour);
        $(stepElement).after($('.tour-step-background'));
        $(stepElement).after($('.tour-backdrop'));
    }
});
 
function getTourElement(tour){
    return tour._steps[tour._current].element
}

这使用 jQuery 的 .after() DOM 操作将背景移动到与我们的游览对象相同的堆叠上下文中。

此外，我们需要将两个游览背景元素定位为fixed 而不是absolute，这样它们就不会试图挤进我们的对话框。我们可以使用以下 CSS：

.tour-step-background, 
.tour-backdrop {
    position: fixed;
}

Working Demo in Fiddle

应该是这样的：