Help Center

Menu

Dialog

Using the Dialog component allows the display of additional information in a dialog box/lightbox.

Add the component to your page

When you are editing your page using page-builder:

  1. Optional step. Add a content block to your page by clicking the add_circle button.

  2. Add a component to your page (or the newly-added content block on your page if the optional step above is taken) by clicking the widgets Add component button.

  3. Locate the dialog Squiz core component within the component browser and then click the select button.

    dialog component select

  4. This will add the dialog component to your page.

Configure the dialog component

dialog fields

  1. Enter the dialog’s title.

  2. Enter the dialog’s content.

  3. Enter the text that will appear on the dialog close button.

  4. Enter a unique ID for the dialog. The ID will be used to trigger the dialog in another component.

  5. Specify the size of the dialog.

Basic example

This image shows an active dialog.

dialog example

You can apply your own CSS styling.