Css 使用引导巡更时禁用突出显示的区域

你好

我刚开始在我们的项目中使用Bootstrap Tour，我似乎很喜欢它，因为它的界面简单但功能强大。但我只有一个小问题——如何使巡回演出中突出显示的元素暂时禁用

例如，如果巡演的当前突出显示在一组按钮上，是否有一种方法使用户在巡演时无法单击这些按钮

---

任何帮助都将不胜感激！：）

显示/隐藏步骤时，可以指定回调函数。在这些函数中，您已经访问了当前元素，并且可以对其进行操作（请参阅文档：）：

---

使用相同的回调技术，我决定覆盖一个div，而不是向step元素添加disabled属性当背景打开且元素不是输入字段时，此功能正常工作（即禁用属性无效）

首先是覆盖的css：

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

以及代码（更新以考虑背景填充和绝对定位的阶梯元素）：

onShown：功能（巡演）{
var step=tour.\u options.steps[tour.\u current]；
///在巡更内容上覆盖一个div以防止单击
//删除任何现有的覆盖div-说明在调整窗口大小时调用的显示事件
$（step.element）.同级（'.tour step background parent'）.remove（）；
//创建覆盖div
var disabledOverlay=$（''）；
//在DOM中的step元素之前插入覆盖div
$（step.element）.before（disabledOverlay）；
//说明步骤的背景填充（如果有）（因为它包围了元素，所以将其加倍）
var padding=（step.backdropPadding | | 0）*2；
//将叠加div的大小设置为步长元素的大小，并通过添加1个像素来考虑舍入
禁用Doverlay.outerHeight（stepElement.outerHeight（）+填充+1）、outerWidth（stepElement.outerWidth（）+填充+1）；
//根据元素的位置设置位置并调整背景填充
var offset=stepElement.offset（）；console.log（offset）；
offset.top=offset.top-（step.backdropPadding | | 0）；
offset.left=offset.left-（step.backdropPadding | | 0）；
禁用多佛莱偏置（偏置）；
},
onHidden：功能（巡更）{
var step=tour.\u options.steps[tour.\u current]；
//删除覆盖div
$（step.element）.同级（'.tour step background parent'）.remove（）；
}

API已更新，您可以通过以下代码实现相同的功能

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

---

要归功于@zessx，对我来说，最简单的方法就是使用CSS

您可以将CSS应用于高亮元素：

.tour-NameOfYourTour-element {
    pointer-events: none;
}

---

这不会在视觉上改变任何东西，clic也不起作用。

仅供参考，API已经更新，您现在需要使用tour。_options.steps[tour._current]；

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

.tour-NameOfYourTour-element {
    pointer-events: none;
}