javascript - Bootstrap Tour 不会加载到模态框上

Question

我已经在我的项目中实现了 Bootstrap 之旅。我尝试将其加载到模态窗口上，但没有显示任何内容。下面是我的代码:

<script type="text/javascript">
            $(document).ready(function () {
                // Instance the tour
                var tour = new Tour({
                    steps: [
                        {
                            element: "#facility_name_div",
                            title: "Select Facility",
                            content: "Change the  Displayable Facility. "
                        }
                    ]});

// Initialize the tour
                tour.init();

// Start the tour
                tour.start();
            });
        </script> 

我的模态窗口如下:

    <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">    
    <!-- Modal content-->
    <div class="modal-content">
      <form class="query_other_order_no_form" id="query_other_order_no_form">    
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Select Facility : </h4>
        </div>
        <div class="modal-body">
          <div class="box-body">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <div id="facility_name_div"></div>
                  <label>Please Select a Facility : </label>
                  <select class="form-control select2 c_bpartner_name" id="c_bpartner_name" required="" style="width: 100%;">
                    <option selected="selected" value="">Please Select One : </option>
                  </select>
                </div>
                <!-- /.form-group -->

              </div>
              <!-- /.col -->

            </div>
            <!-- /.row -->
          </div>
          <!-- /.box-body -->
        </div>
        <div class="modal-footer">
          <!--<button type="button" id="bpartner_query_btn" class="btn btn-default bpartner_query_btn pull-left">Query</button>                                                             <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>-->
        </div>
      </form>
    </div>
  </div>
</div>

请您告诉我如何设置模式窗口上显示的 Bootstrap 游览？

Answer 1

我怀疑您可能遇到了当步骤触发时模态不可见的问题。但是我需要更多背景来确定。您可以检查的一种方法是使用 Bootstrap Tour 中真正有用的部分之一，即 Debug模式。可以将其添加到您的游览对象中，如下所示:

var tour = new Tour({
                debug: true,
                steps: [
                    {
                        element: "#facility_name_div",
                        title: "Select Facility",
                        content: "Change the  Displayable Facility. "
                    }
                ]});

通过添加此行，您的游览将在浏览器控制台中打印出它正在执行的操作。游览将打印出它正在跳过一个步骤，因为该元素不可见，这非常有帮助。

我最近遇到了这个可见性问题，这是一个解决方法(诚然不是最好的)，我将其添加到我的游览中上一步的 onNext 函数中。我完全愿意接受更好的解决方法:

onNext: function(tour){
                tour.end();
                setTimeout(function(){
                    tour.restart();
                    tour.goTo(4); //substitute your step index here
                }, 500); //change this to as little as your load time allows
            }

另一件事需要注意的是模态框和利用 Bootstrap 弹出窗口功能的游览的 z 索引。如果模式可见，并且您的 Debug模式显示当前显示该步骤，则您可能需要调整其中一个或另一个的 z 索引，以确保模式不会隐藏弹出窗口。