2

好的，所以我正在将 Bootstrap Tour 与使用 Twitter Bootstrap 3 的项目集成。基本上，一切正常，直到我显示一个模式然后尝试附加一个步骤。在我调整浏览器大小之前它不会显示。我可以关闭模​​式并且它不存在并调整窗口大小然后它显示，所以这不是我不相信的 z-index 问题。任何帮助，将不胜感激。

// Instance the tour
var jag_tour = new Tour();

//Step 1, show info about are submission entry
jag_tour.addStep({
    element: ".submission_entry",
    title: "Sample Signup",
    content: "This is where your snazzy new signups will be found. Click them to show more details.",
    onNext: function(tour) {
        var submission_id_info = $(".submission_entry").attr('id');
        submission_id = submission_id_info.split('_');
        show_submission_info_modal(submission_id['1']);
        jat_tour.start();
    }
});

//Step 2, show our modal popup edit info
jag_tour.addStep({
    element: "#modal_submission_owner_name",
    title: "Prospect Info",
    content: "Need to change the owner of a prospect? How about some details? No problem, just do that here.",
    onPrev: function(tour) {
        $("#view_submission_modal").modal('hide');
    },
});

// Initialize the tour
jag_tour.init();

jag_tour.start();
4

2 回答 2

1

我的 Angular 应用程序也有同样的问题。最初我正在调用游览的 init 并从我用来启动游览的按钮开始：

<button ng-click="tour.init(true);tour.start(true);">Start Tour</button>

在调整屏幕大小之前，我永远不会看到弹出窗口。我用 z-index 尝试了所有我能做的事情，但这没关系，直到这个尺寸改变完成后才开始巡演，所以没有 popovder 对象来提高 z-index，我什至没有看到我的浏览器的 DOM 资源管理器中的元素，直到调整大小之后。当我重构调用控制器中的一个函数来做同样的事情时，问题就消失了！

<button ng-click="startTour()">Start Tour</button>

（控制器）

$scope.startTour = function(){
        tour.init(true);
        tour.start(true);
}

可能是范围问题（尽管我从未见过任何错误），但我仍然在摸不着头脑，为什么这会有所帮助。

于 2015-12-14T18:15:57.577 回答
0

我已经成功地在 onNext 块中手动调用了模式。在你的情况下，这看起来像

onNext: function(tour) {
    var submission_id_info = $(".submission_entry").attr('id');
    submission_id = submission_id_info.split('_');
    show_submission_info_modal(submission_id['1']);
    $('#modal_submission_owner_name').modal
    jat_tour.start();
}

我也很好奇你为什么在这一步调用 jat_tour.start() 。看来您应该只需要开始初始化之旅，不是吗？

于 2014-02-12T03:04:57.857 回答