I have implemented a customized boostrap modal in a single product on the PLP of my site. The HTML for this modal is as follows:
<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>
To trigger this modal, I use the following a tag:
<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>
Below is the CSS styling for the modal:
.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;
}
While the modal functions correctly for one product tile on the PLP, it does not work when trying to open it from another tile while a modal is already open. How can I make the modal pop up from multiple product tiles simultaneously?
Refer to this image showing the modal successfully displayed on one product tile:
https://i.sstatic.net/WLbA6.png
This is the link that must be clicked to successfully open the modal for this specific product tile:
https://i.sstatic.net/w3cCf.png
I aim to open a new modal from the provided link while another one is already open. What steps should I take to achieve this?
Are there any specific considerations I need to keep in mind to achieve this functionality?
Although I am using Demandware ISML templates, I have omitted ISML tags as they are not relevant to the current question.