Popup Modal Confirmation Implementation

Documentation Index

Fetch the complete documentation index at: https://docs-unity.molca.id/llms.txt

Use this file to discover all available pages before exploring further.

Core Components:

• Assets/_MolcaSDK/_VR/Scripts/Scenario/Steps/PopupStep.cs — Step that displays popup modal and validates confirmation
• Assets/_MolcaSDK/_VR/Scripts/UI/Modal/ModalManager.cs — Manages modal lifecycle and interaction
• Assets/_MolcaSDK/_VR/Scripts/UI/Modal/PopupModalUI.cs — Popup modal UI component with buttons and content display

​

Role

This guide covers implementing popup modals with confirmation in VR training scenarios:

• PopupStep — Step that displays modal and waits for confirmation
• ModalManager — Centralized modal lifecycle management
• PopupModalUI — Visual modal component with title, message, and action buttons
• Confirmation Logic — Custom handlers for confirm/cancel/dismiss actions

Combined, these create guided confirmation experiences where trainees acknowledge, confirm, or make choices in modals, with optional follow-up actions based on their response.

​

Setup Steps

​

1. Create Modal Content (Text Assets)

1. Create a GameObject to hold modal content configuration
2. Add a PopupContent ScriptableObject or data structure with:
   • Title: Modal headline (e.g., “Confirm Action”)
   • Message: Modal body text (e.g., “Are you sure you want to proceed?”)
   • Confirm Button Label: Primary action text (e.g., “Yes”, “Confirm”)
   • Cancel Button Label: Secondary action text (e.g., “No”, “Cancel”)
   • Icon/Image: Optional visual asset for modal header

​

2. Add PopupStep for Modal Control

1. Create or select a GameObject to hold the PopupStep component
2. Add PopupStep component
3. Configure in Inspector:
   • Trigger Mode: Select how modal appears
     • On Activated — Modal shows immediately when step becomes active (automatic)
     • Manual Trigger — Step waits for manual trigger event before showing modal (requires external input)
   • Popup Content Ref: Assign the PopupContent reference (or inline title/message)
   • Modal Manager Ref: Assign the ModalManager (auto-find if available)
   • Confirm Button Target: (Optional) Assign action to trigger on confirm
   • Cancel Button Target: (Optional) Assign action to trigger on cancel
   • Complete On Confirm: Enable if step should complete when user confirms
   • Dismiss On Cancel: Enable if step should dismiss when user cancels
   • Show Overlay: Enable for background fade/blocking overlay

​

3. Setup Modal UI Canvas and Buttons

1. Create a Canvas (Screen Space - Overlay recommended for modals)
2. Add PopupModalUI component to the Canvas
3. Configure in Inspector:
   • Title Text: Assign TextMeshProUGUI for modal headline
   • Message Text: Assign TextMeshProUGUI for modal body
   • Confirm Button: Assign Button component for primary action
   • Cancel Button: Assign Button component for secondary action
   • Modal Background: Assign Image component for modal panel
   • Overlay Fade: (Optional) Assign Image component for background fade

​

4. Wire PopupStep and PopupModalUI Together

1. On the PopupStep component, assign the PopupModalUI reference
2. On the PopupModalUI component, assign the PopupStep reference (for event callbacks)
3. Configure button callbacks:
   • Confirm Button.onClick → PopupStep.OnConfirm()
   • Cancel Button.onClick → PopupStep.OnCancel()
4. (Optional) Add Overlay GameObject with Image component for background fade during modal display

​

How It Works

​

PopupStep

File: Assets/_MolcaSDK/_VR/Scripts/Scenario/Steps/PopupStep.cs Displays a modal and validates player confirmation:

​

On Activated Mode (Automatic)

1. On step start (OnStepActivated): Automatically initializes and shows modal
   • Resolves PopupContent reference
   • Passes content to PopupModalUI
   • Shows modal with fade overlay
   • Registers button callbacks
2. On confirm (OnConfirmPressed): Player presses confirm button
   • Triggers optional confirm action
   • If Complete On Confirm enabled: completes step
3. On cancel (OnCancelPressed): Player presses cancel button
   • Triggers optional cancel action
   • If Dismiss On Cancel enabled: dismisses modal without completing step
4. On step end (OnStepCompleted): Hides modal and overlay

​

Manual Trigger Mode (Awaiting Signal)

1. On step start (OnStepActivated): Initializes but does NOT show modal yet
   • Prepares PopupContent reference
   • Waits for manual trigger signal
   • Modal remains hidden, Canvas inactive
2. On manual trigger (OnManualTrigger): External event triggers modal display
   • Shows modal with fade overlay
   • Registers button callbacks
   • Same confirmation/cancellation flow as On Activated mode
3. On confirm/cancel → Same as On Activated mode
4. On step end (OnStepCompleted): Hides modal and overlay

Key fields:

• triggerMode — Trigger activation method (OnActivated or ManualTrigger)
• popupContentRef — PopupContent with title, message, button labels
• modalManagerRef — ModalManager reference (auto-finds if null)
• confirmButtonTarget — Action to trigger on confirm
• cancelButtonTarget — Action to trigger on cancel
• completeOnConfirm — Auto-complete step on confirm
• dismissOnCancel — Dismiss without completing on cancel
• showOverlay — Display background fade overlay

​

PopupModalUI

File: Assets/_MolcaSDK/_VR/Scripts/UI/Modal/PopupModalUI.cs Displays and manages popup modal UI:

1. Initialize (SetContent): Receives PopupContent and updates UI
   • Sets title text
   • Sets message text
   • Updates button labels
   • Shows icon (if provided)
2. Show (ShowModal): Reveals modal and optional overlay
   • Fades in modal canvas
   • Animates modal entrance (slide, scale, fade)
3. Button Interaction: Players interact with confirm/cancel buttons
   • Buttons trigger PopupStep callbacks
   • Optional haptic feedback on button press
4. Hide (HideModal): Dismisses modal and overlay
   • Fades out modal canvas
   • Animates modal exit

Key fields:

• titleText — TextMeshProUGUI for modal title
• messageText — TextMeshProUGUI for modal message
• confirmButton — Button component for confirm action
• cancelButton — Button component for cancel action
• modalBackground — Image for modal panel
• overlayFade — (Optional) Image for background overlay
• showDuration — Duration of show animation (default: 0.3s)
• hideDuration — Duration of hide animation (default: 0.3s)

​

ModalManager

File: Assets/_MolcaSDK/_VR/Scripts/UI/Modal/ModalManager.cs Centralized modal lifecycle management:

1. ShowModal — Queues and displays modal
2. HideModal — Dismisses active modal
3. IsModalVisible — Checks if modal currently shown
4. SetContent — Updates modal content before showing
5. RegisterCallback — Subscribes to modal events (confirm, cancel, dismiss)

---

​

Expected Results & Interaction Flow

​

Idle State

Step is not active. No modal visible. Background appears normal. Canvas is hidden.

​

Step Activated (Modal Appears)

When PopupStep becomes active:

• Modal Canvas becomes visible (fade in)
• Background Overlay appears (semi-transparent fade)
• Modal Panel displays with animation (slide, scale, or fade)
• Title and Message populated from PopupContent
• Confirm/Cancel Buttons are interactive and highlighted
• Visual feedback signals “Make a choice”

​

User Approaching Modal

As trainee’s hand approaches buttons:

• Buttons show hover states (color change, glow, scale)
• Cursor/Ray highlights interactive button
• Haptic Feedback pulses on button proximity
• Visual feedback indicates “Button is interactive”

​

Confirming Choice

Trainee presses confirm button:

• Button shows press animation (scale down, color change)
• Haptic Feedback pulses on button press
• Modal may show confirmation animation or immediate hide
• Step progresses or completes based on configuration

​

Canceling or Dismissing

Trainee presses cancel button or outside modal:

• Button shows press animation
• Modal fades out with dismiss animation
• Background Overlay fades
• Step returns to waiting or dismisses entirely

​

Step Complete

Confirmation/dismissal conditions met:

• Modal fully hidden
• Overlay fully faded
• Step fires OnStepEnd event
• Canvas returns to inactive state
• Interaction flow complete

​

Implementation (Inspector Only)

For popup confirmation, no code required. Configure entirely in Inspector:

1. PopupContent — Title, message, button labels
2. PopupStep — Content reference, action configuration
3. PopupModalUI — Canvas, text, buttons setup
4. ModalManager — Lifecycle management (auto-find)

All components work together automatically through the step lifecycle.

​

Troubleshooting

​

Visual Examples

​

Scene Setup

​

Modal State Animation

​

Button States

​

Related

• PopupStep — Modal display and confirmation logic
• ModalManager — Modal lifecycle and queue management
• VR UI Widgets — Base UI component library
• VR step auxiliaries — Integration with scoring, haptics, and info display
• Step lifecycle events — OnStepBegin, OnStepEnd event system
• VR player manager — Disable locomotion during modal interaction