Mindblown: a blog about philosophy.
-
How to Close Modal After Clicking Hash Links in Oxygen Menu
Peter Bronski wrote about the improved version (to add accessibility support by being able to click the link, close the modal and jump to the section) of the code that Mike originally shared for closing the modal after a hash link in the Menu component is clicked in Oxygen. I have refactored the code and…
-
How to Close Modal in Oxygen When Menu Links are Clicked
When using a Modal for off-canvas menu in Oxygen for one-page websites, typically we have a nav menu inside the Modal that has links to sections on the same page. After the user is taken to the target element, the modal continues to remain open. This members-only tutorial provides the steps to close the modal…
-
Passing an email from an input to a form field
This members-only tutorial provides the steps to set up an input field of type email and a button next to it with the button click showing a Fluent Forms form in Oxygen’s modal. We shall use jQuery to populate the email field in the form with the content of the input entered by the visitor.…
-
Full Screen Search in Oxygen
This members-only tutorial provides the steps to set up a fullscreen search using the Modal component in Oxygen. Step 1 Let us change the output of the search form and other elements to HTML 5. Install and activate Code Snippets plugin. Go to Snippets > Add New. Title: Add support for HTML5 markup Code: add_theme_support( ‘html5’, array( ‘comment-list’,…
-
How to Make Oxygen Modals Editable in Gutenberg
By default, modals that are added to pages are hidden when the page is ‘made editable in Gutenberg’. This is wise as it can mess up the page layout quite a bit and be confusing to content editors. However, if we do want to make them visible, so they can be editable directly from the…
-
Hide Modal Backdrop for Notifications & Site Messages in Oxygen
Modals along with conditions give us a lot of control delivering messages to site visitors. Are they on a specific page? Is this the first time they have visited the site? Great, show this message to them. These types of site messages can be created in Oxygen using the modal component, but a modal by…
-
Toggleable Modal Trigger with Animated Hamburger in Oxygen
This members-only tutorial extends the previous Toggleable Modal Trigger tutorial and shows how to animate the hamburger menu icon between its regular state and a X icon using the CSS-animated hamburgers. Step 1 Implement the Toggleable Modal Trigger in Oxygen tutorial. Step 2 Delete the Menu icon and move the Code Block from Step 1c…
-
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…
-
Cookie Info Bar in Oxygen
This members-only tutorial provides the steps to show a cookie consent information bar without using a plugin or loading a 3rd party JS file in Oxygen. We shall use the Modal and Conditions features with a few lines of custom JS. When a user visits any page of the site for the first time, the…
-
iframe in Oxygen Modal
This members-only tutorial provides the steps to add a responsive iframe in an Oxygen Modal component. Step 1 In the Oxygen editor, add a Modal. Add a Code Block inside the Modal. PHP & HTML: This is a premium members-only content. To view the rest of the content, please sign up for membership ($47/month or…
-
How to autoplay a YouTube video in Oxygen’s modal
This tutorial provides the steps to autoplay a YouTube video in a modal in Oxygen. Step 1 In Oxygen editor, add a Modal component. Add a Video component inside the Modal. Tick “Manually Paste Iframe Code”. Paste the YouTube video embed code. Ex.: Add `?autoplay=1` after the video URL. Ex.: Make sure you set the…
-
UIKit for Oxygen Modals
This members-only tutorial provides the steps to apply UIKit for Oxygen’s Modal components so they work better especially when there is overflow compared to the earlier shared fix. Live Demo (scroll down until you see the Open Modal button) Step 1 Load UIKit in your WordPress site by following Step 1 of this tutorial. Step…
Got any book recommendations?