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

时间：2016-12-05 01:24:48

标签： javascript jquery twitter-bootstrap bootstrap-tour

这是我的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>

以下是巡回演出的背景：

这是正确呈现： highlighted-element-visible

这两个未正确呈现，突出显示的元素不可见： highlighted-element-not-visible search-bar-element-not-visble

如何将所有元素渲染为顶部元素，其中突出显示的元素可见？

修改1

这是一个显示行为的JSFiddle：

https://jsfiddle.net/nrkry27p/

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

最终修改

经过多轮编辑，不断的支持和提升，我们终于弄明白了。所以，我决定清理所有那些对理解问题和解决方案没有真正增加价值的编辑。

3 个答案:

答案 0 :(得分：1)

目前，.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小提琴不包括关于z-index navbar-fixed-top的引导程序中的违规CSS。一旦确定了这一点，我们需要添加一些JS和一些CSS来解决问题。当你开始游览时，JS会将一个类应用于名为is-touring的主体，并在结束时删除该类。

使用此类我们覆盖navbar-static-top的z-index值，以便我们可以在巡视显示上方显示其内部元素。 onStart和onEnd函数在API reference中可用于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

答案 1 :(得分：1)

我已经使用了您的代码并找到了解决方案。问题是它为您的跨度增加了一个类，因此没有白色背景，您不会获得突出显示行为。所以，如果你在你的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;
}

更新：

根据您的屏幕截图和更改样式，我意识到您的课程z-index低于backdrop本身，因此单独更改背景并不会有所帮助：

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

更新2：

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

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

答案 2 :(得分：1)

您必须为要设置样式的元素提供初始背景值，因为background和inherit元素上的默认span样式甚至h2都没有。只要同时为span.num-players及其父h2提供样式background: inherit，就可以轻松解决此问题。只需附加如下。

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

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

修改

JSFiddle

我对z-index的{​​{1}}发表了评论，因为它覆盖了.tour-backdrop元素。

.tour-step-backdrop
相关问题
最新问题