Bootstrap Tour не отображается на Bootstrap Twitter 3 modal

Question

Итак, я интегрирую 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(); 

Answer 1

У меня был успех с вызовом модального вручную в блоке 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() на этом шаге. Кажется, вам нужно только начать тур по инициализации, нет?

Answer 2

У меня была такая же проблема с моим угловым приложением. Изначально я звоню инициализации тура и начать с кнопки я использовал, чтобы начать тур:

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

Я бы никогда не видеть всплывающее окно до изменения размера экрана. Я пробовал все, что мог, с z-index, но это не имело значения, тур даже не начался, пока это изменение размера не было сделано, чтобы не было объекта popovder для повышения z-индекса, я даже не видел элемент в моем браузере DOM Explorer до тех пор, пока не изменится размер. Когда я реорганизовал вызов функции в контроллере, чтобы сделать то же самое, проблема исчезла!

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

(контроллер)

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

Возможно проблема сфера (хотя я никогда не видел каких-либо ошибок), но я до сих пор ломают голову, почему это помогло.