这是我的 Bootstrap Tour 正在处理的 HTML:
<body class="top-navigation">
<div id="wrapper">
<div id="page-wrapper">
<div class="row border-bottom">
<nav class="navbar navbar-static-top">
<div class="navbar-header">
<a href="/">
<img class="navbar-brand" alt="image" src="logo.png" />
</a>
<form class="navbar-form-custom" action="/profiles" accept-charset="UTF-8" method="get">
<input type="text" name="q" id="top-search" class="form-control"/>
</form>
</div>
<ul class="nav navbar-top-links navbar-right">
<li>
<a class="coach-dashboard" href="/dashboard">
<i class="fa fa-dashboard"></i> My Dashboard
</a>
</li>
<li>
<a class="my-favorites" href="/profiles?filter=favorites">
<i class="fa fa-list"></i> My Favorites
</a>
</li>
<li>
<a class="settings" href="/users/registration/edit">
<i class="fa fa-sliders"></i> My Settings
</a>
</li>
</ul>
</nav>
</div>
<div class="row wrapper border-bottom gray-bg page-heading">
<h2><span class="num-players">14 Players - Tryouts One 2016</span</h2>
</div>
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="contact-box profile-24">
<a href="/profiles/24">
<div class="col-lg-offset-1 col-lg-4 col-xs-4">
<div class="text-center">
<img alt="image" src="profile-24.jpg" />
Age: 30
</div>
</div>
<div class="col-lg-offset-1 col-lg-6 col-xs-8">
<h3><strong>Jimmy Choos</strong></h3>
<address>
<strong>St. George's College</strong><br>
Grade: <br>
Height: N/A<br>
Weight: N/A<br>
</address>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
这是触发游览的 JS:
<script type="text/javascript">
$(document).on('turbolinks:load', function() {
var tour = new Tour({
storage: false,
backdrop: true,
steps: [
{
element: "div.navbar-header input#top-search",
title: "Search",
content: "Here you can search for players by their name, school, positions & bib color (that they wore in our tournament)"
},
{
element: "div.page-heading h2 span.num-players",
title: "Number of Players",
content: "This is the number of players are in our database for this Tournament"
},
{
element: '#page-wrapper div.contact-box.profile-<%= @profiles.first.id %>',
title: "Player Info",
content: "Here we have a quick snapshot of the player stats"
}
]});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
});
</script>
以下是游览在背景下的样子:
这已正确呈现:
这两个未正确渲染，突出显示的元素不可见:
如何让所有元素像顶部元素一样渲染，其中突出显示的元素可见？
编辑 1
这是一个显示行为的 JSFiddle:
https://jsfiddle.net/nrkry27p/
具体来说，请注意第二步，它不会像演示中的搜索那样突出显示。除了在我的真实代码中，搜索不会突出显示......但您应该能够了解正在发生的事情。
最终编辑
经过多轮编辑、不断支持和反复，我们终于弄清楚了。因此，我决定清理所有对理解问题和解决方案没有真正增加值(value)的编辑。
最佳答案
目前.tour-step-background元素有 background-color:inherit属性，继承 transparent来自body 。显示搜索元素的原因是它默认的背景颜色为 white从浏览器。
尝试向 .tour-step-background 添加背景颜色元素，或者设置 background-color为您body元素。这应该“突出显示”它所在的步骤。
<强> JSFIDDLE
.tour-step-background{
background-color:#FFF;
}
编辑
这仍然是 z-index和background-color您遇到的问题。根据我们的讨论，事实证明，提供的 JS fiddle 不包含来自 bootstrap 的关于 z-index 的有问题的 CSS。的navbar-fixed-top 。一旦确定了这一点，我们就需要添加一些 JS 和 CSS 来解决这个问题。 JS 将一个名为 is-touring 的类应用于主体。当你开始巡演时，并在结束时取消类(class)。
使用此类，我们覆盖 navbar-static-top 的 z 索引值这样我们就可以在游览显示屏上方显示其内部元素。 onStart 和 onEnd 函数可在 API reference 中找到。用于 Bootstrap 游览。
CSS
/* ALSO REMOVE THE Z-INDEX VALUE ON THE RULE (line 247) */
.navbar-form-custom .form-contro{}
/* ADD THIS STYLE */
.is-touring .navbar-static-top{
z-index:auto;
}
/* BEGIN OPTIONAL CSS */
.tour-step-background {
background-color:#fff;
z-index: 2101;
}
.tour-step-backdrop{ /* this exists already, so update */
z-index: 2102;
}
.tour-backdrop {
z-index: 2100;
opacity: .7;
}
.popover[class*=tour-] {
z-index: 2101;
}
/* END OPTIONAL CSS */
JS
var tour = new Tour({
storage: false,
backdrop: true,
onStart: function(){
$('body').addClass('is-touring');
},
onEnd: function(){
$('body').removeClass('is-touring');
},
steps: [
{
element: "div.navbar-header img.navbar-brand",
title: "Go Home",
content: "Go home to the main page."
},
{
element: "div.navbar-header input#top-search",
title: "Search",
content: "Here you can search for players by their name, school, positions & bib color (that they wore in our tournament)"
},
{
element: "span.num-players",
title: "Number of Players",
content: "This is the number of players that are in our database for this Tournament"
},
{
element: '#page-wrapper div.contact-box.profile-24',
title: "Player Info",
content: "Here we have a quick snapshot of the player stats"
}
]});
<强> UPDATED FIDDLE
关于javascript - 为什么在我的 Bootstrap Tour 过程中所选元素并不总是弹出？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40965798/