Skip to main content

Patterns

 

OutSystems

Modal

A box with content that is displayed as an overlay on top of the screen.

Use the Modal to interrupt the end-user and demand an action. It is implemented to direct an end-user’s attention to important information. Ideal for when the end-user is requested to enter information critical to continuing the current process.

How to use

After placing a Modal on the screen, open it by calling a new screen action using a button with its method set to Ajax submit and use the Toggle Modal action (found in the Logic Tab). Use the pattern parameters to define if it has an Overlay, its Position in the page and the Enter/Leave animations.

  1. Drag the Modal pattern into the preview.
  2. Set the content in the placeholders.

  3. Use a Button Widget or a Link with Ajax Submit to open the Modal Pattern.

  4. In the Destination property, create a new screen action to trigger the modal.

  5. Inside the action created, use the action ToggleModal and set the WidgetID.

  6. Set the Input Parameters to change the default values.

Input Parameters

Input Name Description Type Mandatory Default Value
Position Set the position of the Modal on the screen. PositionExtended Identifier False Entities.PositionExtended.Center
HasOverlay When true, an overlay is enabled behind the modal. Boolean False True
EnterAnimation Set the enter animation. EnterAnimation Identifier False Entities.EnterAnimation.EnterScale
LeaveAnimation Set the leave animation. LeaveAnimation Identifier False Entities.LeaveAnimation.LeaveScale
ExtendedClass Add custom style classes to this Block. Text False None

Layout and Classes

Advanced Use Case

Change the animation speed

It is possible to change the animation speed of Modal by using custom CSS. To implement this in your application, copy the CSS to the theme.

.modal .animate {
    -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
}
  • Was this article helpful?