Html 如何从具有相同DOM结构的多个产品分幅中打开多个模态？

我在这里使用的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>

这是同样的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模板，但这与我这里的问题无关。

ID和相应的数据目标必须是唯一的添加产品ID或根据我的评论为

ID=“tumbler size modals”

所特有的东西，您需要确保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>

变量正在加载

因此，所有具有modal的产品都具有相同的modal id“不倒翁大小modals”？好的，很酷，谢谢，现在我想我的解决方案错了。这可能会帮助我得到我需要的。一般来说，ID必须是唯一的。如果你想对很多元素做点什么，你应该使用类。但这是BootRap模式，不能真正使用自定义js来打开模式，如果bootstrap已经与我的projectcool集成，谢谢，这可能完全解决了我的问题，让我们检查一下，如果在这之后还有一些问题，我将在这里更新我的问题。否则，这可能就是我一直在寻找的解决方案类型。似乎

data target=“#tumbler size modals-${product_id}”

无法完成，因为

和

$

不能在ISML模板中一起使用，在这种情况下我能做什么？我已经找到了解决方案，我已经在资源消息中传递了散列值，然后将产品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>