---
title: "Pop Modal Panel Snippet"
slug: "pop-modal-panel-snippet"
updated: 2025-09-26T07:05:31Z
published: 2025-09-26T07:05:31Z
canonical: "docs.unqork.io/pop-modal-panel-snippet"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Pop Modal Panel Snippet

## Overview

The **Pop Modal Panel** snippet lets you add a pop-up modal to your application. Modals are smaller windows that display on top of another page. When displayed, modals disable the rest of the page, leaving it visible but darkened. You can use a modal to draw your end-user's attention better than using a static message.

You'll often want user interaction to trigger a modal. For example, you could have a modal appear at the click of a button. Or, you might have a modal appear if there's an error on the page. Either way, your end-user must dismiss the modal to continue.

The main driver of this [snippet](/v1/docs/introduction-to-snippets) is a [Panel](/v1/docs/panel-component) component, which holds the content of your modal. You can customize the Panel, adding [components](/v1/docs/module-builder-component-library) that fit your needs. Here are some examples of when you might use the Pop Modal Panel snippet:

- Display help information that won't fit in a tooltip. Or, for components that don't have a tooltip option.
- Prompt end-users to join an email list.
- Allow end-users to complete a registration form for an event.
- Display information for a selected row in a [ViewGrid](/v1/docs/viewgrid-component) component.

The Pop Modal snippet is preconfigured with a [Button](/v1/docs/button-component) component that reads **Open**. Clicking the button opens the contents of the Panel component as a modal. The Panel then has a Close button to **close** the modal. Here's what the snippet looks like in Express View:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/PopModal_Express%20(1).webm?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A17Z&se=2026-11-08T11%3A18%3A17Z&sr=c&sp=r&sig=OoIbrPklElGUh6EJjAlTNH%2FDQqZmJApUrQOpnLabBig%3D)

And here's how the snippet looks in the [Module Builder:](/v1/docs/introduction-to-the-module-builder)

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/PopModal_MB.webm?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A17Z&se=2026-11-08T11%3A18%3A17Z&sr=c&sp=r&sig=OoIbrPklElGUh6EJjAlTNH%2FDQqZmJApUrQOpnLabBig%3D)

## What You'll Learn

In this article, you'll learn how the Pop Modal Panel snippet works and how to customize it.

## How the Snippet Works

Your Pop Modal Panel snippet has a Panel component that holds the content of your modal. Selecting the **Modal** Interaction Type lets the Panel component behave as a modal. With this setting enabled, your modal displays once the end-user triggers it.

[![A static image displaying how to select the Modal setting.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/PopModal_Panel_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A17Z&se=2026-11-08T11%3A18%3A17Z&sr=c&sp=r&sig=OoIbrPklElGUh6EJjAlTNH%2FDQqZmJApUrQOpnLabBig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/PopModal%20Panel.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A17Z&se=2026-11-08T11%3A18%3A17Z&sr=c&sp=r&sig=OoIbrPklElGUh6EJjAlTNH%2FDQqZmJApUrQOpnLabBig%3D)

### How the btnOpen and btnClose Button Components Work

The snippet also includes two preconfigured Button components to trigger the Panel. Both Button components include an **Event** Action Type that triggers either the openModal or closeModal event:

- Clicking the **openModal** Button triggers the openModal event. This button displays outside the modal.
- Clicking the **closeModal** Button triggers the closeModal event. This button displays inside the modal.

### How the ruleBtn Decisions Components Works

Lastly, the snippet uses a [Decisions](/v1/docs/decisions-component) component to define the role of each button. On button-click, the Decisions component triggers the **panelModal** Panel component. The Micro Decisions determine which button was clicked and either opens or closes the modal.

[![A static image displaying the Inputs, Outputs, and Micro Decisions of the snippet's Decisions component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/PopModal_Decisions_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A17Z&se=2026-11-08T11%3A18%3A17Z&sr=c&sp=r&sig=OoIbrPklElGUh6EJjAlTNH%2FDQqZmJApUrQOpnLabBig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/PopModal%20Decisions.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A17Z&se=2026-11-08T11%3A18%3A17Z&sr=c&sp=r&sig=OoIbrPklElGUh6EJjAlTNH%2FDQqZmJApUrQOpnLabBig%3D)

## Customizing the Snippet

The function of this snippet is fairly general. So, there are many ways to use it. That said, the fundamental customization is the same.

The main customization to make to this snippet is the modal's content. The modal is a Panel component, so you can add components to it if that was part of your use case. For example, if you want the modal to collect email addresses, you'll add an [Email](/v1/docs/email-component) component. The same goes for collecting phone numbers or addresses.

> [!TIP]
> To learn more about collecting phone numbers or addresses, see our [Phone Number](/v1/docs/phone-number-component), [Intl Phone Number](/v1/docs/intl-phone-number-component), and [Address Search](/v1/docs/address-search-component) component articles.

From there, you'll likely edit the Button component labels that display. If you plan to save data using this snippet, you also need to configure a new Button component. The following section shows you some of the customizations that might help you.

### Changing the Content of the Pop Modal

By default, the snippet includes an [HTML Element](/v1/docs/html-element-component) component as the only content for the modal. use this component to add your own content. First, you'll delete the HTML Element component and then add your own. To add or remove content:

1. Hover over the **htmlModalPanel** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/html_teal_component.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A17Z&se=2026-11-08T11%3A18%3A17Z&sr=c&sp=r&sig=OoIbrPklElGUh6EJjAlTNH%2FDQqZmJApUrQOpnLabBig%3D) HTML Element** component.

A 5-button toolbar appears above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(33).jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A17Z&se=2026-11-08T11%3A18%3A17Z&sr=c&sp=r&sig=OoIbrPklElGUh6EJjAlTNH%2FDQqZmJApUrQOpnLabBig%3D) (**Settings**) button.
3. Using the Configuration window, make changes to the component’s settings and content as needed.
4. Click **Save & Close**.

### Changing the Button Labels

By default, the Buttons in this snippet read as **Open** and **Close**. To customize these labels:

1. Hover over the **btnOpen** or **btnClose** **![Decisions Component icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_teal_component(1).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A17Z&se=2026-11-08T11%3A18%3A17Z&sr=c&sp=r&sig=OoIbrPklElGUh6EJjAlTNH%2FDQqZmJApUrQOpnLabBig%3D) Button** component.

A 5-button toolbar appears above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(33).jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A17Z&se=2026-11-08T11%3A18%3A17Z&sr=c&sp=r&sig=OoIbrPklElGUh6EJjAlTNH%2FDQqZmJApUrQOpnLabBig%3D) (**Settings**) button.
3. Adjust the **Label Text** as needed.
4. **Save & Close** each component after making changes.

### Adding a Button Component

Depending on your use case, you may need more than two Button components. For example, you might need a **Save** button if you want to collect information in your modal. To do this, you'll add a new Button component to your module.

1. Drag and drop a **![Decisions Component icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_teal_component(1).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A17Z&se=2026-11-08T11%3A18%3A17Z&sr=c&sp=r&sig=OoIbrPklElGUh6EJjAlTNH%2FDQqZmJApUrQOpnLabBig%3D) Button** component onto your canvas, positioning it as needed.
2. Configure the **![Decisions Component icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_teal_component(1).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A17Z&se=2026-11-08T11%3A18%3A17Z&sr=c&sp=r&sig=OoIbrPklElGUh6EJjAlTNH%2FDQqZmJApUrQOpnLabBig%3D) Button** as needed.
3. Click **Save & Close**.
4. **Save** your module.

## Resources

- [Learn how to Browse, Add, Remove, and Create Snippets.](/v1/docs/unqork-marketplace-key-concepts)
- [Panel Component](/v1/docs/panel-component)
- [Button Component](/v1/docs/button-component)
- [Decisions Component](/v1/docs/decisions-component)

A modal is a window that appears on top of the content you are currently viewing.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.