Hide Modal Backdrop for Notifications & Site Messages in Oxygen

Modals along with conditions give us a lot of control delivering messages to site visitors. Are they on a specific page? Is this the first time they have visited the site? Great, show this message to them.

These types of site messages can be created in Oxygen using the modal component, but a modal by itself isn’t perfect as the modal backdrop causes the site to not be accessible while the modal is visible. This makes sense when using modals for certain popups or forms, but not for site messages, cookie consents, etc.

Welcome Message Example

Here is an example of a simple welcome message created with a modal in Oxygen. The idea is to not be intrusive. The welcome message can be ignored, or closed or clicked, but it doesn’t necessarily need to be preventing the user from using the rest of the site.

Of course, we could just not use modals at all, instead build it using just a fixed element, which then wouldn’t have this problem. But we would lose some functionality such as controlling when the modal becomes visible.

Disabling the Modal Backdrop

To be able to use modals for site messages and similar, a solution is to disable the backdrop that comes with the modal, making the rest of the site accessible.

To do this, we must first make the backdrop have a transparent background, so it is invisible. We can do this from the main modal settings.

Then we can use some handy CSS, which simply turns off pointer events for the backdrop (allowing the user to click through the element to the site). We then turn the pointer-events back on for the modal, to allow the user to actually click inside the modal.

Note; this has been asked as a feature request, so we wouldn’t need to add the CSS manually. Vote if it’s something you think is useful.

For now, we can add this CSS to a custom stylesheet in Oxygen.

.oxy-modal-backdrop {
    pointer-events: none;
}

.oxy-modal-backdrop .ct-modal {
    pointer-events: auto;
}

For removing the backdrop on a specific modal individually, rather than all of them, we would need to be more specific with our CSS.

We don’t have a way to add classes to backdrops for targeting individually. One way around this is to wrap the whole modal (or multiple modals) inside a div and give that div a class of, say, ‘site-messages’. Then we can target just these modals like so…

.site-messages {
    width: 100%;
}

.site-messages .oxy-modal-backdrop {
    pointer-events: none;
}

.site-messages .oxy-modal-backdrop .ct-modal {
    pointer-events: auto;
}

All done