Dialog Container Component

A dialog container is hidden by default and can be opened a few different ways. 
The container itself works like a standard container. Components can be added based on its policy or its parent's.

The dialog must have a unique ID, which is referenced as the HREF property to trigger visibility.

The Built-in opener is a simple CTA which is part of the component. 

External openers can be a link in text, a standard CTA component, or an image. On Zurn.com we also open dialogs from embedded SVG images. It requires applying the "dialog-open" class.

When you use an external opener, the dialog itself should be moved to the bottom of the page. When using the Built-in opener must be placed where you want the built-in call-to-action to show up.

The dialog can be closed with the X in the top right corner or with a button (configurable). If styling is not set-up, please contact IT.

When authoring, the dialog will be visible on the page at all times. 

External Opener - This link opens Dialog 2.