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>

1 Answer 1


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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.