Modal in a Modal

I’m working on on a site where the design calls for creating a modal within a modal. The issue I’m coming across is getting the toggle for the second modal to close the first modal.

Usually in a modal I can create a close button using the “data-x-toggle-close” attribute, but I tried that with no luck. Do you have any further guidance on how, or if, this can be achieved in Pro?

Best, Marcus

Hi Marcus,

What are you expecting is beyond the scope of our theme support, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

Thanks

I suppose I should have worded my question differently. The issue I’m having is that the modal toggle is not properly recognizing/applying the the “data-x-toggle-close” attribute like every other Pro element I have used. I can create divs, cells, buttons, images, and so on that use this attribute with no issue, but the modal toggle is the lone exception.

Is this by design or is this a bug?

Hello @mgalindo,

Please be advised that the modal element is not designed to be nested inside another modal element. It will result to an issue or create a conflict in your site sooner or later. You may need to restructure your design to use one modal at a time only.

Best Regards.

@ruenel,

While I appreciate you concern, that doesn’t answer the question I posed. I’m not the designer for this particular site so I don’t really have an option to change it unless I present an actual UX issue. My client approved this design, going back to say that I can’t build what their designer specified isn’t an option.

I should be able to add the “data-x-toggle-close” attribute to the toggle (just like any other element or any other attribute) and have it close the the current modal. I do this for other popup content (e.g. lightboxes for video in a mega menu) without issue all the time.

My question is, why does the attribute in the toggle not work as it does for various other elements (div, cell, image, text, column)?

Frankly, I can build my own modal if I have to, but I buy Pro to make building sites for clients easier. While I can understand bugs or features not yet existing, it’s getting frustrating to keep hearing the same non-helpful responses to rather basic questions.

Hi Marcus,

As my colleague says that the modal element does not allow another modal inside that is the reason behind the data-x-toggle-close is conflicting with the child and parent modal. And that is why the data-x-toggle-close is not working.

Thanks for understanding

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.