Updated on July 12, 2019

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.

Demo (reduce the height of your desktop or check in mobile):

Before: https://oxymodal.demo.site/before/

After: https://oxymodal.demo.site/after-5/

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/

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

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: