Huawei Developers
Published in

Huawei Developers

Super Easy Way to Implement a Custom Pop-up

Introduction

The promt.showDialog API of Quick App can be used to implement simple pop-up elements such as text and buttons, but cannot achieve complex display effects. UI designers will often design complex effects, so how do we actually achieve them as engineers?

For example, the design of a pop-up includes a list, in which images are displayed on the left and descriptions need to be shown on the right, as shown in Figure 1 below. Another pop-up instructs users to check the app’s privacy statement via a link, as shown in Figure 2.

Figure 1 Pop-up with a list Figure 2 Pop-up with a link

Proper arrangement of quick app elements and style attributes can help achieve such complex effects.

Solution

You can use the stack element with the position: fixed CSS style to implement a custom pop-up. Whether to display the pop-up can be determined using the if/show command. Sample code is as follows:

  1. Initialize data models:

2.Page layout:

Page style:

Conclusion

You can use the stack element with the position: fixed CSS style to implement a custom pop-up.

Reference

For more information, please refer to the following:

Style of Quick App

Quick App materials

Common settings of Quick App

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store