Nested Modals Not Working

[whitemedia]

Hi,

I have a nested modal where the second modal, when clicked, opens behind the main modal. What I am attempting to do is when the main modal’s toggle is clicked, a PDF preview of a restaurant’s menu displays (see second screenshot below). To allow the visitor to download the menu, if they hover over or click the second modal (the download icon at the top of the main modal), a download button appears, which enables the visitor to download and save the menu to their device.

In the Cornerstone preview, the second modal displays ok, as expected, but not on the front end. Is this a bug, or have I missed something?

The div with the top arrow in the first screenshot has a higher z-index than everything else, but still its modal does not appear on top of the menu modal.

Menu Structure Showing The Modals

Front End View Of The Modal With The Download (Second) Modal Being Clicked

Cornerstone Preview Correctly Showing The Second Modal

Thanks,
Christopher

[ruenel]

Hello Christoper,

Thanks for writing in! The parent Modal always stay on top. You may need to use custom inline CSS to your modal to be able to make it stay on the top layer.

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You must maintain any custom coding to ensure it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

[whitemedia]

Thanks @ruenel,

I had got that far, but was missing the .x-modal.x-active part of the first line. I am grateful for the help.

Many thanks,
Christopher

[prakash_s]

You are most welcome @whitemedia