为什么在我的 Bootstrap 游览期间所选元素并不总是弹出？

Question

这是我的 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&#39;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/

具体来说，请注意第 2 步，它不会像演示中的搜索那样突出显示。除了在我的真实代码中，搜索没有突出显示...但是您应该能够了解正在发生的事情。

最终编辑

经过多轮编辑，不断的支持等等，我们终于弄明白了。因此，我决定清理所有对理解问题和解决方案没有真正价值的编辑。

Answer 1

目前 .tour-step-background 元素有一个 background-color:inherit 属性，它从 body 继承 transparent。显示搜索元素的原因是浏览器默认背景颜色为 white。

尝试为 .tour-step-background 元素添加背景色，或者为 body 元素设置 background-color。这应该 "highlight" 它所在的步骤。

JSFIDDLE

.tour-step-background{
    background-color:#FFF;
}

编辑

这仍然是您遇到的 z-index 和 background-color 问题。根据我们的讨论，事实证明，提供的 JS fiddle 不包括来自 bootstrap 关于 navbar-fixed-top 的 z-index 的违规 CSS。一旦确定了这一点，我们就需要添加一些 JS 和一些 CSS 来解决这个问题。当您开始游览时，JS 将 class 应用于名为 is-touring 的主体，并在您结束时删除 class。

使用此 class 我们覆盖 navbar-static-top 的 z-index 值，以便我们可以在游览显示上方显示其内部元素。 onStart 和 onEnd 函数在 API reference for bootstrap tour.

中可用

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

Answer 2

我试过您的代码并找到了解决方案。问题是它会在您的跨度中添加一个 class ，因此没有白色背景，您将不会获得突出显示行为。因此，如果您将此添加到 css:

.num-players.tour-step-backdrop {
  background-color: white;
}

它会起作用的。还有你的最后一个：

.contact-box.profile-24.tour-step-backdrop {
  background-color: white;
}

或者您可以使用这样的通用规则：

.tour-step-backdrop {
    background-color: white;
}

更新：

根据您的屏幕截图和更改样式，我意识到您在 class 上的 z-index 比 backdrop 本身低，因此仅更改背景并不会帮助：

.tour-step-backdrop {
    background-color: white;
    z-index: 3100;
}

更新 2：

class 是通用的，不应单独使用。我尝试了几种变体，这似乎有效：

.tour-step-backdrop.tour-tour-element {
   z-index: 4000;
   background-color: white;
 }

Answer 3

您必须为要设置样式的元素提供初始背景值，因为在 span 和 h2 元素上甚至 inherit 都没有默认 background 样式.只要给span.num-players和它的父h2一个样式都是background: inherit就很容易解决这个问题。只需将其附加如下。

h2 { 
  /* Other style */ 
  background: inherit; 
} 

.tour-step-backdrop { 
  /* Other style */ 
  background: inherit; 
}

编辑

JSFiddle

我评论了 .tour-backdrop 的 z-index，因为它覆盖了 .tour-step-backdrop 元素。

.tour-backdrop {
  /* z-index: 2100;  Disable this style. */
  opacity: .7;
}

为什么在我的 Bootstrap 游览期间所选元素并不总是弹出？

Why does the selected element not always pop out during my Bootstrap Tour?

javascript

jquery

twitter-bootstrap

bootstrap-tour