Page as a Modal

Capriza supports the inclusion of modals, pages which are overlaid onto a main page with the main page visible in the background, in Zapps. Common in web design, modals have a variety of uses, including for confirmation or error dialogs, lookup dialogs, or to make it clear to the user that his or her input (e.g. making a selection from a dropdown, clicking a button, etc.) is required before returning to the previous page.


To create a modal page, go to the page's In-Line Editor (ILE) in either Simplify or Style mode, and select the "Modal" option from the Display dropdown.




The selected page will now be displayed like this.



You may customize the modal page's heading to include different theme colors, additional buttons, etc. Please see Header Styling Options for more information.



By default an "X" in the right hand corner serves as means to close the modal (by default it is the browser Back button), allowing the user to navigate back to the main page. You may replace the "X" with a different button (e.g. Approve, Reject, Submit, etc.), in either the Header or page body. Regardless of which option you choose, it is important to provide users with a way to navigate away from the modal.


Note: In the case of several successive modal pages, the second and following pages will have a standard back arrow in place of an "X."



Note that, when viewing a modal page, the previous page will still be visible in the background but will be overlaid with a tinted layer. User interaction with the main page is not available until he or she exits the modal (if the Zapp flow calls for the user to return to the same page).


Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Please sign in to leave a comment.