Close modal when another one opens

Hi there -
I’m using a looper to create a grid of modals using custom triggers, and created a previous/next button when the modal opens in the hopes that clicking the button will load the next modal. This works, however it’s hidden behind the original modal. Is there a way to close a modal when the next one opens?
Thanks in advance

Hey Katie,

Thanks for writing in! Regretfully you cannot close the other modal when another one is open. I would highly recommend that you use only 1 modal and then add a stacked Slider where in each slide would display the information of the portfolio item. Perhaps this can help you as a referrence:
https://www.youtube.com/watch?v=do45n9xMUVo

Hope this makes sense.

Hi there,
Thanks for the tip - okay i’ve implemented this using the video for guidance. I’ve set each column to open the slide at the looper index number using data-x-slide-goto - with identical looper providers and consumers set up for the slider and the row, however for some reason the slider always open at slide 1.

The HTML looks correct for the trigger -
HTML here

However slide 1 is the one that opens. Am I missing something?

Thanks

Hey @katie_s_mills,

Do you have another slider within the page? If there is, assign an ID to the slider you wish to target or move. Apply it to the Slide Container element.

image

Then, add this attribute key and value to each of your link/buttonsdata-x-slider-id and the-id.

image

If that doesn’t help, please provide the correct login credentials because the one given previously doesn’t work.

Thanks.

Thanks - that didn’t change anything. Oddly the funcitonality is working inside the cornerstone editor but not on the live site.
I’ve checked the login details and they do work - please try again. Thank you

Hey Katie,

Could you please update the Pro theme to version 6.5.13? This is the latest version and currently you are using an older version (Pro 6.5.10).

Kindly let us know how it goes.

Hello there -
I have updated to the latest version and the issue persists. Thanks!

Hey Katie,

The Dynamic Rendering option in the Modal element settings must be disabled.

Check your page now.

1 Like