Отключить выделенную область при использовании Bootstrap Tour

Question

Добрый день!

Я только начал использовать Bootstrap Tour в нашем проекте, и мне, похоже, нравится его простой, но функциональный интерфейс. Но у меня есть одна крошечная проблема - как я могу выделить элементы, которые будут выделены в ходе тура, чтобы временно отключиться?

Например, если текущая подсветка тура находится на множестве кнопок, существует ли способ, чтобы пользователи не могли нажимать на них во время тура?

Любая помощь была бы высоко оценена! :)

Answer 1

Вы можете указать функции обратного вызова, когда шаг показывается/скрыт. В этих функциях, вы имеете-доступ к текущему элементу, и вы можете воздействовать на него (см документации: Tour Options):

var tour = new Tour({ 
    onShown: function(tour) { 
     var step = tour._steps[tour._current]; 
     $(step.element).attr('disabled', true); 
    }, 
    onHidden: function(tour) { 
     var step = tour._steps[tour._current]; 
     $(step.element).removeAttr('disabled'); 
    } 
}) 

JSFiddle ;

Answer 2

Используя ту же технику обратного вызова, я решил наложить div вместо добавления отключенного атрибута в элемент шага. Это хорошо работает, когда фон включен и элемент не является полем ввода (т. Е. Свойство отключено не действует).

Сначала CSS для наложения:

.tour-step-backdrop-parent { 
    position: absolute; 
    z-index: 1100; 
} 

И код (обновляется для учета фоне заполнения и абсолютного расположен шаг элемента):

onShown: function(tour) { 
    var step = tour._options.steps[tour._current]; 

    /// Overlay a div on the tour contents to prevent clicking 
    // Remove any existing overlay divs - accounting for shown event being called on window resize 
    $(step.element).siblings('.tour-step-backdrop-parent').remove(); 
    // Create overlay div 
    var disabledOverlay = $('<div class="tour-step-backdrop-parent"></div>'); 
    // Insert overlay div before step element in DOM 
    $(step.element).before(disabledOverlay); 
    // Account for step's backdrop padding if any (double it since it surrounds the element) 
    var padding = (step.backdropPadding || 0) * 2; 
    // Set size of the overlay div to the step element's size and account for rounding by adding 1 pixel 
    disabledOverlay.outerHeight(stepElement.outerHeight() + padding + 1).outerWidth(stepElement.outerWidth() + padding + 1); 
    // Set position based on element's position and adjust for backdrop padding 
    var offset = stepElement.offset();console.log(offset); 
    offset.top = offset.top - (step.backdropPadding || 0); 
    offset.left = offset.left - (step.backdropPadding || 0); 
    disabledOverlay.offset(offset); 
}, 
onHidden: function(tour) { 
    var step = tour._options.steps[tour._current]; 
    // Remove overlay div 
    $(step.element).siblings('.tour-step-backdrop-parent').remove(); 
}