Alert Box

Multiple purpose alerts can be fixed to the viewport or added inside content. Control how they appear and if/when to show them again to returning visitors.

The difference between the built-in Modal and Alert Box components is that the Alert Box’s alerts

• There isn’t a backdrop.
• Comes with a close icon built-in.
• can be used for inline alerts or notices that need to be fixed.
• can be used to place inside a header row to create an announcement bar that can be closed.
• Can be programmatically opened/closed

Option Controls

Alerts can either be shown just once to visitors, shown every time a visitor lands on the page or shown every x days.

Gutenberg Visibility

If using the Oxygen – Gutenberg integration, alerts can be set to be hidden or visible inside the gutenberg editor, depending on if the content inside needs to be editable.

Alert Closing

The alert box currently has two ways of being closed. Fading Out or Sliding Up. The sliding up is designed to work best when the alert is being used as a notification bar, see the instructions below.

Close Icon

The alert box comes with a default close icon which can be customised using Oxygen’s familiar icon controls to change the icon or for styling.

The default close icon can also be removed if you want to add another icon to act as the close button. As long as the element inside is given the class ‘oxy-close-alert’ then it will work as a close button.

Note – for changing this default icon, some changes may not be seen in real time. The solution is to click ‘Apply Params’ at the bottom of the settings to apply the changes.

Building a Header Notice

• Create a new header row to go above the header row you are using for your header content. Set the width for the header row to be full width and don’t set a height.
• Place an alert box in the row center and set the alert box type to ‘Header notice’. This will ensure the alert will automatically take up the 100% space of the header row, regardless of where it’s positioned. Change the alert closing to slide up and alert reveal to either fade or slide down if you prefer.
• Add your content and use a condition if you only want the notification to appear on certain pages or time.

Alert Triggers

Aswell as having the alerts appear on page load (using conditions to choose where to display, and choosing whether to display again for the user) there are now two more options, click or custom.

• Click – To add some more flexibilty, the alerts can now be triggered by click, so they can be used as a container for any content or elements that need to be revealed by a user clicking on another element
• Custom – in a similar way to how Modal’s can be closed programmatically using the oxyCloseModal function, the alert box can be both revealed and closed using extrasCloseAlert() & extrasShowAlert().