Fixing the modal issue in Oxygen

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 ) {
            event.stopPropagation();
    }); 

    $('.oxy-close-modal, .oxy-modal-backdrop').click(function(){
            $('.oxy-modal-backdrop.live').removeClass("live");
            oxyCloseModal();
    });

}(jQuery));

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.

References

https://github.com/soflyy/oxygen-bugs-and-features/issues/279

https://www.facebook.com/groups/1626639680763454/permalink/2220479624712787/

https://www.facebook.com/groups/1626639680763454/permalink/2223746907719392/