3

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

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

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

t.start();

这是我的意思的一个jsFiddle 示例。

带有 jQ​​uery 对话框的引导程序之旅

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

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

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

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

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

4

3 回答 3

11

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

为了证明，添加以下 css，您仍然会 在对话框上方#content看到div 显示，它有一个of . --> 即Z 索引不是绝对的！... jsFiddlez-index100

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

从没有人告诉你关于 Z-Index 的内容：

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

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

  • 当一个元素是文档的根元素时（元素）
  • 当一个元素的位置值不是 static 并且 z-index 值不是 auto 时
  • 当元素的不透明度值小于 1 时

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

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

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

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

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

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

这是一个简化的标记树

  • 身体
    • 旅游背景（一般放这里）
    • 新的堆叠上下文
      • 旅游对象
      • 旅游背景（应该去这里）

为了覆盖它，我们将插入到 toursonShown方法并自己移动背景：

在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;
}

Fiddle 中的工作演示

应该是这样的：

演示

于 2013-11-07T21:19:51.397 回答
1

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

于 2014-03-14T06:33:39.320 回答
-2

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

[http://jsfiddle.net/KyleMit/DYNbj/82/][1]
于 2015-04-19T04:18:34.157 回答