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

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 上的单个产品图块，此模式会按预期弹出，但是当我尝试在另一个图块打开时从另一个图块打开相同的模式时，没有任何操作。我该怎么做才能从多个产品图块中弹出此模式。

这是显示一个产品图块成功弹出的模式的图像：

这是需要单击才能成功打开此产品图块的模式的链接：

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

为了实现这一点，我需要牢记什么具体的事情吗？

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

Answer 1

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

Answer 2

根据我的评论，您需要确保 ID 是唯一的。我在 ID 中放置了一个示例变量，但您需要确保它适用于您的系统。

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


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