Question

How do I add a custom class to the background of a modal widget in Magento 2?

I'm able to change the class for the main modal <aside> with the modalClass config property but want to change the class on the background div behind the modal, which isn't a child of the <aside>.

This is how I set the modalClass currently:

<div data-mage-init='{"My_Module/js/my-modal":{"modalClass":"foo"}}'></div>
Was it helpful?

Solution

After looking at the source code for modals in vendor/magento/module-ui/view/base/web/js/modal/modal.js, I found the option: overlayClass which I could use in my initialisation object to set my own custom class:

<div data-mage-init='{"My_Module/js/my-modal":{"modalClass":"foo","overlayClass":"bar"}}'></div>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top