Bootstrap Tour 不会在 Modal 上加载

Question

我已经在我的项目中实施了引导程序。我试图在模态窗口上加载它，但没有显示任何内容。下面是我的代码：

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

要注意的另一件事是您的模态和使用 Bootstrap 弹出功能的游览的 z-index。如果模态框可见并且您的调试模式显示当前显示了该步骤，则您可能必须调整其中一个或另一个的 z-indexes 以确保模态框没有隐藏弹出框。

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 中存在与淡入淡出类的 CSS 冲突（将不透明度设置为 0“零”）。试试这个 CSS：

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

Answer 4

您需要设置 Popever 的索引。游览时将可见。

例子：

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