如何从具有相同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上的单个产品图块，但是当我尝试在打开另一个模态的同时从另一个图块打开相同的模态时，则没有任何动作。我该怎么做才能从多个产品图块中弹出这种模式。

以下是成功弹出一个产品图块的模态的图像：

这是专门用于此产品图块的，单击以成功成功打开模式的链接：

我想在另一个链接打开的同时从标记的链接打开另一个模式。那么，我该如何实现相同的目标？

要实现这一目标，我有什么需要牢记的地方吗？

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

Answer 1

该ID和相应的数据目标必须是唯一的，添加产品ID或Jobs.defaultProps = { jobs: { isLoading: false } } 唯一的

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>