Javascript Bootstrap巡回赛赢得'；t在模态上加载

我已经在我的项目上实现了引导程序。我尝试将其加载到模式窗口，但没有显示任何内容。下面是我的代码：

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

$（文档）.ready（函数（）{
//举例说明这次旅行
var tour=新的tour({
步骤：[
{
要素：“#设施名称(部门)”，
标题：“选择设施”，
内容：“更改可显示设施。”
}
]});
//初始化巡更
tour.init（）；
//开始旅行
tour.start（）；
});

我的模态窗口如下所示：

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

&时代；
选择设施：
请选择一个设施：
请选择一个：

---

请您告诉我如何设置模式窗口上显示的引导程序

我怀疑您可能遇到了一个问题，即在启动踏板时您的模态不可见。然而，我需要更多的背景来确保。您可以检查的一种方法是使用引导程序中真正有用的部分之一，即调试模式。可以将其添加到巡更对象，如下所示：

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-索引和利用Bootstrap的popover函数的tour。如果模态可见，并且调试模式显示步骤当前已显示，则可能必须调整其中一个的z索引，以确保模态未隐藏popover

一个简单的解决方案是初始化并仅在显示模式后开始巡演。。。 对于您的代码，这将提供：

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

$（文档）.ready（函数（）{
//举例说明这次旅行
var tour=新的tour({
步骤：[
{
要素：“#设施名称(部门)”，
标题：“选择设施”，
内容：“更改可显示设施。”
}
]});
$（'#myModal'）.on（'show.bs.modal'，函数（e）{
//初始化巡更
tour.init（）；
//开始旅行
tour.start（）；
});
});

在bootstrap 3和bootstrap Tour 0.11中，CSS与淡入类冲突（将不透明度设置为0“零”）。试试这个CSS：

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

---

您需要设置Popever的索引。当巡演结束时，它将可见

例如：

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

你能添加一份可能的副本吗