Native modal container

Category: Widgets
Subcategory: Mobile

Overview

Show a modal page over the current content.

Documentation

null
Demo url

NativeModalContainer

Show modal content, full page or with partial transparency

Features

  • Show modal content
  • Uses boolean trigger attribute to show/hide modal
  • Can be used to create transparent/translucent effects

Use cases

  • Show content where user should not be allowed to back out. Also Android back button has no effect
  • Show content over current page
  • Emulate hamburger menu

Usage

  • Define a boolean attribute (referred to as ShowModal from here) on the context object to show/hide the modal.
  • Place the widget on the page.
  • The modal is shown over the current contents; no need to place it on a separate page
  • Always start your modal content with a container that has Size=Maximumspace
  • To create a transparent effect, do not choose a background color for that container
  • Remember that containers can have onclick events! Especially for transparent parts, when the user taps outside the modal, it should disappear. Can be achieved by setting onclick event on the transparent container and just set your ShowModal attribute to false.
  • Place your content in the container created earlier.
  • Use spacing, justify and alignment to position the content as usual.
  • Combine with the Animation widget for nice visual effects.

The test project in the GitHub repository has samples

Flickering during hiding the modal.

Note that sometimes flickering can occur when hiding the modal. Use conditional visibility on your content to hide it along with the Modal to prevent this.

GitHub repository

[https://github.com/Itvisors/mendix-NativeModalContainer]

Releases

Version: 2.0.0
Framework Version: 9.12.1
Release Notes: Mendix 9.12
Version: 1.4.0
Framework Version: 9.6.5
Release Notes: Dark mode icon
Version: 1.3.0
Framework Version: 9.6.0
Release Notes: Mendix 9.6, new icons, tested with Atlas 3
Version: 1.2.0
Framework Version: 8.18.9
Release Notes: Updated internal dependencies to match Mx8.18, no functional changes
Version: 1.1.0
Framework Version: 8.15.1
Release Notes: No functional changes. Updated internal dependencies to match Mx8.15