Toggleable Modal Trigger in Oxygen

This members-only tutorial provides the steps to toggle (open and close) a modal by clicking the same element (hamburger menu button) in Oxygen.

We shall

• add a menu icon in the header
• add a modal with trigger set to an element click but not select a trigger
• add custom JavaScript to toggle the modal when the modal trigger (menu icon) is clicked/tapped
• add custom CSS to offset the modal backdrop from the top (by setting top and height values) based on the height of admin bar and/or header
• replace the above CSS with jQuery code where we define a custom function that sets the offset and call this function when the modal is shown and when the window is resized using a simple debounce technique.

The next tutorial will extend this by animating the menu icon to a close (X) icon.

Step 1

Edit your Template/Page with Oxygen.

a) Add an Icon component.

Give it a class of modal-trigger.

At Advanced > Custom CSS add

cursor: pointer;

b) Add a Modal component.

Give it a class of say, my-modal.

Set it to be triggered when user clicks an element. Leave the trigger selector empty.

Since we are most likely going to not want the modal to be closed when the backdrop is clicked, set Close Modal on Backdrop Click to No.

c) Add a Code Block.

This can be anywhere in the Structure. But makes it easy if it is either at the very top or very bottom for easy access.

PHP & HTML:

<?php
	// echo "hello world!";
?>

JavaScript: