Pop It Up! Building Dynamic Popups in HarmonyOS Next — Step-by-Step Guide

Read the original article：Pop It Up! Building Dynamic Popups in HarmonyOS Next — Step-by-Step Guide

Introduction

Popup elements serve as an essential tool in mobile user interfaces for presenting brief informational messages, warnings, or confirmations without disrupting the main workflow. HarmonyOS enables the integration of such popup messages by allowing developers to associate temporary overlays with interactive components like buttons.

This article illustrates how to implement a popup that displays contextual information upon user interaction. The popup includes configurable properties such as background blur, custom text appearance, and masked backgrounds to maintain visual focus. These features contribute to a non-intrusive and user-friendly interface design, commonly required in modern application development.

Why Use Popups in HarmonyOS Applications?

Delivers contextual information without full-screen transitions
Lightweight and easy to integrate into existing UI components
Supports customization (text style, background mask, blur effects)
Enhances user experience through focused and non-intrusive messaging
Suitable for confirmations, errors, tooltips, and brief status updates
Ideal for compact interfaces requiring minimal disruption

Implementation

Let's create a few components. For example, let's create a button.


Button({ type: ButtonType.Normal }) {
  Row() {
    Column() {
      Text('Get Books List')
        .fontSize(12)
        .fontWeight(FontWeight.Bold)
        .fontColor('#000000')
      Rect()
        .radius(1)
        .fill('#0A59F7')
        .height(2)
        .width(75)
    }
  }
}
.width('70%')
.height('15%')
.backgroundColor('#fff8f1e3')
.borderRadius(24)

Next, let's add some codes for the popup. First, let's define a boolean value to check the visibility of the popup.

@State handlePopup: boolean = false

Now, add functionality.


.onClick(() => {
  this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, {
  backgroundBlurStyle: BlurStyle.Thin,
  message: 'All Books will be listed',
  messageOptions: {
    textColor: Color.Black,
    font: {
      size: '12vp',
      weight: FontWeight.Bolder
    }
  },
  mask: {color:'#33000000'},
})

Now, let's merge these two codes.

Button({ type: ButtonType.Normal }) {
  Row() {
    Column() {
      Text('Get Books List')
        .fontSize(12)
        .fontWeight(FontWeight.Bold)
        .fontColor('#000000')
      Rect()
        .radius(1)
        .fill('#0A59F7')
        .height(2)
        .width(75)
    }
  }
}
.width('70%')
.height('15%')
.backgroundColor('#fff8f1e3')
.borderRadius(24)
.onClick(() => {
  this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, {
  backgroundBlurStyle: BlurStyle.Thin,
  message: 'All Books will be listed',
  messageOptions: {
    textColor: Color.Black,
    font: {
      size: '12vp',
      weight: FontWeight.Bolder
    }
  },
  mask: {color:'#33000000'},
})

This code creates a custom-styled button labeled “Get Books List” using ArkTS. When the button is clicked, it toggles a state variable called handlePopup, which controls the visibility of a popup. The popup displays the message “All Books will be listed” with a thin background blur and a semi-transparent dark mask. The button has a light background, rounded corners, and a blue underline below the text for visual emphasis.

Conclusion

Popups in HarmonyOS provide a lightweight and flexible method for delivering brief, focused messages without interrupting the user’s workflow. Through features such as background blur, customizable text, and optional masking, developers can create visually distinct overlays that clearly communicate context-sensitive information. These popups are well-suited for mobile applications where space is limited and quick interactions are essential. By integrating popup elements thoughtfully, developers can significantly enhance usability and responsiveness, making the overall user experience more intuitive and efficient.