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

问题描述

基本上，我可以使用最基本的示例获取创建了一个新的堆叠上下文，因此更改为 z #content 元素的-index 只会显示相对于其当前堆叠上下文。

为了验证，请添加以下css，您仍然会看到 #content div显示上方对话框， code> z-index 的 100 。 - > ie Z索引不是绝对的！ ...

  #content {z-index：0！important; } 
  
 
 
 
 
 
 
从 什么没有人向您介绍Z-Index  ：




The problem is Bootstrap Tour doesn't really have a good way of identifying this.  When they start a tour on an element, they apply:


A full screen black tour-backdrop with a z-index of 1009, 
A white tour-step-background behind the object with a z-index of 1010
and apply a z-index to the current tour element of 1011


...but the last z-index has no effect since our object is already in a stacking context.  It is just positioned higher than any of the other elements within that stack (which it already was).  Incidentally, that's why removing the z-index from ui-front results in the proper appearance because it frees the element from its current stack.



Here's what Bootstrap Tours should be doing, and we'll do manually with DOM manipulation.

The problem is that they are trying to position the elements relative to one another with z-indexes, but anytime the tour object is in a stacking context different from the .tour-step-background and .tour-backdrop, this will fail.  

Solution?  Place the elements you're generating inside the same stacking context!

Here's a simplified markup tree


Body


Tour background (normally goes here)
New stacking context


Tour object
Tour background (should go here)




To override this, we'll plugin to the tours onShown method and move the backdrops ourselves:

In JavaScript, when creating a tour, we'll do the following:
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
}
This uses jQuery's .after() DOM manipulation to move the backdrop to the same stacking context as our tour object.
Also, we'll need to position both our tour backdrop elements as fixed instead of absolute, so they don't try to squeeze inside of our dialog.  We can do that with the following CSS:
.tour-step-background, 
.tour-backdrop {
    position: fixed;
}
Working Demo in Fiddle
Which should look like this:
                        
这篇关于如何让Bootstrap Tour使用jQuery对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！