A dialog is a small window that overlays (pops up over) the content of a webpage. Dialogs communicate information to a user and can prompt them with questions or actions that do not require a response.

Use a modal component when you have a limited amount of space in a page, but still want to request optional information from a user. In Sitecore, the modal can be used on any link or button. A modal is meant to contain another component and does not have its own properties. In Sitecore, the modal can be used on any link or button. Components that can go in the dialog include forms and content.

1. Open your page in Experience Editor where you want to insert a dialog
2. Select Presentation > Details > Final Layout > Edit > Controls > Add
3. Open the Foundation folder > UI Components folder > and select Dialog (not Dialog v2)
4. In the Add to Placeholder field, type "body-content" and click Select
5. Still in the Controls section, select the Dialog item and click Edit
6. In the Anchor field, create a relevant name for your form ie: employeeSurvey. Note: it does not need a # in front of the name you give it.
7. Then select your Form in the Form field dropdown
8. Select ‘Ok’ until you are back to the Experience Editor window
9. Save and publish your page to see results

To test that your Dialog is now active, put #employeeSurvey at the end of the URL of the page and hit Enter on your keyboard. The dialog should popup. Now, you should be able to add an href with the url and anchor wherever it is needed, to ensure the dialog pops up when a user is on the page. ie: www.unum.com/hr-trends#employeeSurvey

A dialog is meant to contain another component and does not have its own properties.

The dialog component is not placed into frames.

Components that can go in the dialog include forms and new content component.

A dialog does not have its own sitecore fields. It contains the fields of the component being used inside of the dialog.

No imagery is used on the dialog component.

TBD