如何使用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。它应该是对话 - ＆gt;突出显示 - ＆gt;元素，但它看起来像是对话框 - ＆gt;元素 - ＆gt;亮点。

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

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

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

Answer 1

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

要获得证明，请添加以下css，您仍会看到#content div显示上方对话框，其中z-index为100 。 - ＆GT;即 Z-index不是绝对的！ ...... jsFiddle

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

---

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

  

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

     

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

     

  
• 当元素是文档（元素）的根元素时
  
• 当元素具有静态以外的位置值和除auto
之外的z-index值时   
• 当元素的不透明度值小于1
时   

---

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

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

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

---

以下是Bootstrap Tours 应该正在做什么，我们将手动进行DOM操作。

问题在于他们试图使用z索引将元素相对于彼此定位，但是当游览对象处于与.tour-step-background和.tour-backdrop不同的堆叠上下文中时，这将是失败。

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

这是一个简化的标记树

• 车身
  • 旅游背景（通常会在这里）
  • 新的堆叠背景
    • 巡回物品
    • 旅游背景（应该到这里）

要覆盖此内容，我们会插入巡视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

这应该是这样的：

Answer 2

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

来作弊

Answer 3

正确的jsfiddle使用最后一个版本的bootstrap tour

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