html - 如何从具有相同 DOM 结构的多个产品图 block 中打开多个模式？

Question

我在这里使用的是在某种程度上自定义的 boostrap 模态。我在我网站的 PLP 上的单个产品中有以下 HTML:

    <div class="modal size-variants fade pr-0" id="tumbler-size-modals" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-body">
                <p>Variants are loading..</p>
            </div>
        </div>
    </div>

此模态由此 a 标记触发:

   <div class="more-sizes-link hide-mobile">
        <a href="javascript:void(0)" data-toggle="modal" data-target="#tumbler-size-modals">
            <isprint value="${Resource.msg('more.sizes.text.nonmobile', 'plp', null)}" />
        </a>
    </div>

这是相同的 CSS:

.modal-backdrop.show{
    opacity: 0;
}

.modal-open{
    overflow-y: visible;
}

.modal{
    position: absolute;
    top: unset;
    bottom: 23%;
    border: 1px solid $border-grey;
    background-color: $transparent-white;
}

目前，对于 PLP 上的单个产品图 block ，此模态按预期弹出，但是当我尝试从另一个图 block 打开相同的模态，而另一个模态已打开时，没有任何操作。我该怎么做才能从多个产品图 block 中弹出此模式。

这是显示为一个产品图 block 成功弹出的模态的图像:

这是需要单击才能成功打开此产品磁贴的模式的链接:

我想在另一个模式打开时从标记的链接打开另一个模式。那么，我怎样才能达到同样的效果呢？

为了实现这一目标，我需要牢记任何具体事项吗？

虽然我正在尝试使用 Demandware ISML 模板，但我没有在标签中添加 ISML，但这与我在这里提出的问题无关。

Answer 1

ID 和相应的数据目标必须是唯一的添加产品 ID 或 id="tumbler-size-modals"

唯一的东西