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

Question

基本上我可以使用最基本的示例来使用Bootstrap Tour,但是当在jQuery对话框中定位元素时,高亮显示会覆盖元素.

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

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

t.start();

这是我所说的jsFiddle示例.

高亮元素应位于目标元素后面,以便文本仍然可见.

我认为问题是元素的z-index.它应该是dialog - > highlight - >元素,但它看起来像是对话框 - >元素 - >高亮显示.

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

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

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

Answer 1

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

为了证明这一点,添加以下的CSS,你仍然会看到#content格显示器上面 的对话框,其中有一个z-index的100.- >即Z-index不是绝对的!... jsFiddle

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

从没有人告诉你Z-Index:

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

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

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

问题是Bootstrap Tour并没有很好的方法来识别这个.当他们开始游览元素时,他们适用:

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

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

这是Bootstrap Tours 应该做的事情,我们将手动使用DOM操作.

问题是他们试图用z索引将元素相对于彼此定位,但是只要tour对象处于与.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操作将背景移动到与我们的tour对象相同的堆叠上下文.

此外,我们需要将我们的巡演背景元素定位为fixed而不是absolute,因此他们不会试图挤压我们的对话框.我们可以使用以下CSS来做到这一点:

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

小提琴中的工作演示

这应该是这样的: