Update: Follow this article by Alexander Buzmakov instead.

Modals were one of the highlights of Oxygen 2.3, the other being User Design Library.

The video below explains the modal feature:

Unfortunately as of Oxygen 2.3, when a large amount of content is placed in a modal that does not fit the vertical space of the viewport, it will be cut off at top and bottom with no way to scroll down especially on mobile devices.

In some cases, clicking on the backdrop does not close the modal.

Until these are fixed in an update, here is how we can tackle them for the time being thanks to qriouslad.

Step 1

Add this CSS sitewide [or for the page(s) having modal(s)]:

.oxy-modal-backdrop.live {
	display: block !important;
	right: 0;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;

.admin-bar .oxy-modal-backdrop.live {
	top: 32px;

@media screen and (max-width: 782px) {
	.admin-bar .oxy-modal-backdrop.live {
		top: 46px;


.ct-modal {
	margin: 20px auto;

Step 2

For every page having modal(s), add the following JavaScript in a Code Block:

(function($) {
'use strict';
    $( ".ct-modal" ).click(function( event ) {

    $('.oxy-close-modal, .oxy-modal-backdrop').click(function(){


As to where the code is to be added, it depends on whether you want to add the fix for modals sitewide or for all views that use a particular Template or a specific entry (like Page or Post).

In my “After” demo site below, I’ve placed them in the corresponding areas of a Code Block component below all other components of this Page.





Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: