Question

我已经在我的项目上实现了bootstrap tour。我试图在模态窗口上加载它但没有显示任何内容。以下是我的代码：

<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>

请告诉我如何在模态窗口中设置引导程序游览？

Answer 1

我怀疑你可能会遇到一个问题，即你的模态在步骤开始时是不可见的。但是我需要更多的背景来确保。您可以检查的一种方法是使用Bootstrap Tour中一个非常有用的位置，即调试模式。这可以添加到您的旅游对象中，如下所示：

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
            }

另外需要注意的是你的模态的z-index和使用Bootstrap的popover函数的游览。如果模态是可见的并且您的调试模式显示当前显示了该步骤，则可能必须调整其中一个或另一个的z索引以确保该模式不隐藏弹出窗口。

Answer 2

一个简单的解决方案是，只有在显示模态后才启动并开始游览... 使用您的代码，这将给出：

<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. "
                }
            ]});

        $('#myModal').on('shown.bs.modal', function (e) {
            // Initialize the tour
            tour.init();

            // Start the tour
            tour.start();
        });

    });
</script>

Answer 3

在bootstrap 3和Bootstrap Tour 0.11中，与fade类存在CSS冲突（将不透明度设置为0＆＃34;零＆＃34;）。试试这个CSS：

.tour-tour.fade.in{
    opacity: 1;
}

Answer 4

您需要设置Popever的索引。游览结束后便会可见。

示例：

.popover[class*=tour-]{
        z-index:100503 !important;
    }

Bootstrap Tour不会加载模态

4 个答案: