CODEWITHSUNDEEP
htmlcsssassbootstrap-4
Code_Ninja
Code_Ninja

Reputation: 1877

How to open multiple modals from the multiple product tiles having the same DOM structure?

I am using boostrap modal here that is customized upto some extent. I have the following HTML in a single product on the PLP of my site:

    <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>

This modal is triggered from this 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>

This is the CSS for the same:

.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;
}

Currently this modal pops up as expected for a single product tile on the PLP, but when I try to open the same modal from another tile while another modal is open, there is no action. What can I do to pop this modal up from multiple product tiles.

Here is the image that displays the modal successfully popped up for one product tile:

Here is the image that displays the modal successfully popped up for one product tile

This is the link that needs to clicked to open the modal successfully specifically for this product tile:

This is the link that needs to clicked to open the modal successfully specifically for this product tile

I want to open another modal from the marked link while another one is open. So, how can I achieve the same?

Is there anything specific that I need to keep in mind in order to achieve this?

I haven't added ISML in the tags although I am trying this using Demandware ISML templates, but that is irrelevant to the question that I have here.

Upvotes: 0

Views: 197

Answers (2)

imvain2
imvain2

Reputation: 15857

Per my comment, you will want to make sure the ID is unique. I placed an example variable in the ID but you will want to make sure it works for your system.

    <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>

Upvotes: 0

Mario
Mario

Reputation: 404

The ID and the according data-target has to be unique add product id or something unique to id="tumbler-size-modals"

Upvotes: 1

Related Questions