Dialog Element

Dialog element provides users with the ability to create interactive dialog boxes or modal windows on their webpages.

These dialogs can be used to display important information, request user input, or prompt users to take specific actions. In this user guide, we'll explore how to use the Dialog element effectively.

What is the Dialog Element?

The Dialog element is a container element that allows users to create modal dialogs on their webpages.

Modal dialogs are windows that appear on top of the main content and require users to interact with them before they can return to the main interface.

image

Dialogs are commonly used for displaying messages, forms, alerts, or other types of content that require user attention.

Common Use Cases:

  • Alerts and Notifications: Dialogs can be used to display alerts, notifications, or messages to users, ensuring that important information is brought to their attention.
  • User Input Forms: Dialogs can contain forms or input fields, allowing users to submit information or perform actions without leaving the current page.
  • Confirmation Dialogs: Dialogs can be used to confirm user actions, such as deleting a file or submitting a form, by prompting users to confirm their decision before proceeding.
  • Product Information: Dialogs can display detailed product information, images, and specifications in a modal window, providing users with more information without cluttering the main page.

Additional Use Cases:

  • Login/Register Forms: Dialogs can be used to display login or registration forms, allowing users to sign in or create an account without navigating away from the current page.
  • Image Galleries: Dialogs can display image galleries or slideshows in a modal window, allowing users to view images in full-screen mode or navigate between multiple images.
  • Video Playback: Dialogs can embed videos from platforms like YouTube or Vimeo, allowing users to watch videos without leaving the current page.
  • Error Messages: Dialogs can display error messages or warnings to users when they encounter issues or errors while using the website.

Adding a Dialog Element:

Add Dialog Element:

  • Drag the Dialog element from the Preset tab, located under the Container section, onto the canvas.
  • Click on the newly added Dialog element to select it. image

Open Editor Panel:

  • Click on the "Tune Item" icon to open the editor panel for the Dialog element.

image

Configure Properties:

  • In the Properties tab, you can configure various settings:
    • Overlay: Toggle this checkbox to enable or disable an overlay behind the dialog.
    • Size: Choose from options such as None, Small, Medium, Large, XL, or Screen to set the size of the dialog.
    • Trigger: Select a trigger option (e.g., None, Page Load, Scroll Middle, Scroll Bottom, Exit Intent) to determine when the dialog should appear.
    • Frequency: Specify the frequency of the dialog display (e.g., None, Request, Session, User, Accept, Acceptance).
    • Trigger Item: Select an item that will trigger the dialog to appear.

image

Add Content to Dialog:

  • Click on the plus icon within the Dialog element to add content.
  • Drag and drop elements from the Preset tab or other sections onto the Dialog to populate it with content.
  • You can add multiple elements and organize them within the Dialog as needed.

image

Customize Dialog:

  • Select each Dialog element individually to customize its properties and appearance.
  • Use the Style tab to configure background color, shadow, padding, margin, border, width, height, transform, and effects.
  • Move to the Action tab to set up actions, events, and event listeners if required.
  • Proceed to the Tag Attribute tab to configure additional attributes for the Dialog element.

Whether displaying alerts, forms, or multimedia content, dialogs are a versatile tool for communicating with users and guiding them through the website's interface.

Happy building with Appmint!