如何让Bootstrap Tour使用jQuery对话框？ [英] How do I get Bootstrap Tour to work with a jQuery dialog?

问题描述

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

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

  #content {z-index：0！important; } 
  
 
 
 
 
 
 
从 什么没有人向您介绍Z-Index  ：
 
 
每个堆叠上下文都有一个HTML元素作为其根元素。当在元素上形成新的堆栈上下文时，该堆栈上下文将其所有子元素限制在堆栈顺序中的特定位置。这意味着如果元素包含在堆叠顺序底部的堆栈上下文中，则无法使其出现在堆叠顺序较高的不同堆栈上下文中的另一个元素前面，即使使用新的堆叠上下文可以通过以下三种方式之一在元素上形成：
 ul> 
 
当元素是文档的根元素（元素）
 
 
当元素的位置值不是static而z-索引值
 
  
    $ b 
 
 
 
问题是 Bootstrap Tour 有一个很好的方法来识别这一点。当他们开始浏览某个元素时，它们会应用：
 
 
 
 
 
全屏黑色游览背景，其z-index为 1009 ，
 
 
白色 / code> 
 
 
的z-index的对象后面的/ code>，并将z-index应用于当前导览的元素<10>  
 
 
 
 
 
 ...但最后一个 z-index 没有效果，因为我们的对象已经在堆栈上下文中。它只是定位高于堆栈中的任何其他元素（它已经是）。顺便说一下，这就是为什么删除 z-index 从 ui-front 导致正确的外观，因为它释放元素它当前的堆栈。
 
 
 
 
 
 
这里是Bootstrap Tours 应该手动使用DOM操作。
 
 
 
问题是，他们试图使用z-index来定位元素相对于彼此，但是当浏览对象处于堆叠上下文不同于 .tour-step-background 和 .tour-backdrop ，这将失败。 
 
 
 
解决方案？将您生成的元素放在同一个堆叠上下文中！
 
 
 
以下是一个简化的标记树
 
 
 
 
 
身体
 
 
 
 
旅游背景（通常在这里） 
 
 
堆叠上下文
 
 
 
 
游览对象
 
 
游览背景（应该在这里） > 
 
 
 
 
 
 
 
 
 
 
 ll插件到游览 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操作将背景移动到与我们的旅游对象相同的堆叠上下文。
 
 
 
将我们的旅行背景元素定位为固定而不是 absolute ，因此他们不会试图挤进我们的对话框。我们可以通过以下 CSS 来实现：
  .tour- step-background，
 .tour-backdrop {
 position：fixed; 
} 
  
 
 
 
  Fiddle中的工作演示 
 
 
 
这应该是这样：
 
 
 
  
 
Basically I can get Bootstrap Tour working with the most basic example, but when targeting an element in a jQuery dialog the highlight covers up the element.
var t = new Tour({
    backdrop: true
});

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

t.start();
Here is a jsFiddle example of what I mean.



The highlight element should be behind the targeted element so that the text is still visible.

I think the issue is the z-index of the elements. It should be dialog -> highlight -> element, but instead it looks like it's dialog -> element -> highlight.

The z-index of the dialog is 100, the highlight is 1010 and the element is 1011, which I believe should be correct.

I can make it work by explicitly removing the z-index on the .ui-front jQuery UI class, but that doesn't seem like the best solution.

Any ideas why the default styling doesn't work if the z-index's are correct?
解决方案
The problem rests in the fact that the jQuery-UI Dialog has created a new stacking context and so changes to the z-index of the #content element will only show up relative to it's current stacking context.

For proof, add the following css, and you'll still see the #content div display above  the dialog, which has a z-index of 100. --> i.e. Z-indexes are not absolute! ... jsFiddle
#content { z-index: 0 !important; }




From What No One Told You About Z-Index:

  
Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order.  That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion!
  
  
New stacking contexts can be formed on an element in one of three ways:
  
  

  
When an element is the root element of a document (the  element)
  
When an element has a position value other than static and a z-index value other than auto
  
When an element has an opacity value less than 1
  




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对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！