Question

我正在网站上工作。你可以在这里预览有问题的页面：https://sporedev.ro/pleiade/lobby.html（不要介意声音，他们不会自动播放，并且将来可以选择播放/静音）。

我在这个项目中使用mapify.js。

我想为指示房间名称的门附近的牌匾启用PopOvers。

我设法激活PopOvers，但问题是我无法控制我希望它们出现的对象。

当有人在其他物体上盘旋时，我不想要PopOver。

由于PopOver中的文本位于区域的title内，我认为检查title是否为空以不触发PopOver。

以下是代码：

    $("img[usemap]").mapify({
    popOver: {
        content: function(zone){ 
                return "<strong>"+zone.attr("data-title")+"</strong>";
        },
        delay: 0.7,
        margin: "15px",
        height: "60px",
        width: "150px"
    }
});

这是HTML：

<area data-group-id="group-2"  alt="f01_r01" title="Secretariat"  shape="poly" coords="375,391,375,450,381,452,444,452,446,446,446,399,443,394,382,390" nohref  alt="" title="Secretariat" data-hover-class="custom-hover-1"/>

我看着SO，我尝试添加一些条件，但它并没有很好地结束。

如果您需要任何其他信息，请与我们联系。

Answer 1

我认为你最好的选择是使用一个自定义的popover类，用于你不想要弹出的区域，具有display: none !important样式。

<area data-pop-over-class="hidden" href="#" shape="poly" coords="..." />

.hidden {
    display: none !important;
}

修改

如果您在第445行打开修改原始来源，则可以更改以下块： https://github.com/etienne-martin/Mapify/blob/master/src/mapify.js#L445

Mapify.prototype._renderPopOver = function (zone) { // Ignore zones with `data-popover-disabled` if ($(zone)[0].hasAttribute('data-popover-disabled') return; if (!this.isCustomPopOver) { this._renderDefaultPopOver(zone); } else { this._renderCustomPopOver(zone); } };

然后将data-popover-disabled添加到您不想要显示弹出窗口的区域。

修改2

适用于您指定的缩小版本。

查找：

prototype._renderPopOver=function(a){this.isCustomPopOver?this._renderCustomPopOver(a):this._renderDefaultPopOver(a)}

替换：

prototype._renderPopOver=function(a){if(a.hasAttribute('data-popover-disabled'))return;this.isCustomPopOver?this._renderCustomPopOver(a):this._renderDefaultPopOver(a)}

标题为空时停止触发PopOver

1 个答案: