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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($37/month or $399 one-time).

Already a member? Log in below or here.

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.

One comment on “Toggleable Modal Trigger in Oxygen”

magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: