# How to create a pop up window?

**URL:** <https://community.tulip.co/t/how-to-create-a-pop-up-window/8480>\
**Category:** Support, Troubleshooting, & Help\
**Created:** [June 2, 2023, 8:10am UTC](https://community.tulip.co/t/how-to-create-a-pop-up-window/8480 "2023-06-02T08:10:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![TaylorTian](https://avatars.discourse-cdn.com/v4/letter/t/c77e96/32.png) [@TaylorTian](https://community.tulip.co/u/TaylorTian)\
**Post date:** [June 2, 2023, 8:10am UTC](https://community.tulip.co/t/how-to-create-a-pop-up-window/8480/1 "2023-06-02T08:10:03Z")

</div>

I need to pop up a window when operator clicks button or auto pop up the window when data check failed?

 ![Image 2804](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/d/df03487d7056d19f33a84868ce67cd1ca375f65f.png)

---

<div class="post-metadata">

**Author:** ![John](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/john/32/4971_2.png) [@John](https://community.tulip.co/u/John)\
**Post date:** [June 2, 2023, 2:16pm UTC](https://community.tulip.co/t/how-to-create-a-pop-up-window/8480/2 "2023-06-02T14:16:35Z")

</div>

Hi @TaylorTian, this is a fantastic question. Tulip doesn’t have a “pop-up” feature, but designing experiences that feel and perform like popups is easy.

That said, I’m not sure you’ll be able to do this using a form step. My first suggestion would be to build this functionality on a traditional layout using input widgets that correspond to the form step fields you’re asking a user to fill out.

Here’s the technique:

## How to create Pop-ups in Tulip
Pop-ups in Tulip are achieved using two steps. The first step is step you'd like your "pop-up" to appear on. The second step is a duplicate of the first, with UI widgets placed on top of the user interface to resemble a pop-up. To create this experience, any user event that should trigger a pop-up should navigate to the second step with the pop-up features, and navigate back when a user has completed any required actions. 
### Example

Let’s say I have a simple QC step where an operator needs to approve a finished part. It looks like the following:

 ![Screenshot 2023-06-02 at 10.11.00 AM](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/5/530a4b255802cf62d8bb529ef2c00bc8346e0fbf.jpeg)

I want a user to confirm, using a pop-up, that they’ve approved an assembly. To do so, I’ve created as second step with the following features:

 ![Screenshot 2023-06-02 at 10.15.46 AM](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/2/29a49a375f662a4a34361bd0e247eea5d132a1d7.jpeg)

The effect here is one that feels exactly like a pop-up, even though we’re using two different steps in practice.

We also cover this technique in our User Interface Design course in [Tulip University](https://university.tulip.co/learn/courses/145/how-to-design-great-user-experiences) if you’d like to see how we do in a video.

> **[Sign in to your Wistia account](https://tulipinterfaces.wistia.com/account/plans)**

---

<div class="post-metadata">

**Author:** ![RP94](https://avatars.discourse-cdn.com/v4/letter/r/5f9b8f/32.png) [@RP94](https://community.tulip.co/u/RP94)\
**Post date:** [March 3, 2025, 1:46pm UTC](https://community.tulip.co/t/how-to-create-a-pop-up-window/8480/3 "2025-03-03T13:46:52Z")

</div>

@John Is there any better way to do this? Duplicating a step requires changes made to that step to be made twice, which is really complicated and inefficient. I can’t believe that a simple pop-up for confirmation has to go through such complex method.

---

<div class="post-metadata">

**Author:** ![thorsten.langner](https://avatars.discourse-cdn.com/v4/letter/t/4bbf92/32.png) [@thorsten.langner](https://community.tulip.co/u/thorsten.langner)\
**Post date:** [March 4, 2025, 8:16am UTC](https://community.tulip.co/t/how-to-create-a-pop-up-window/8480/4 "2025-03-04T08:16:37Z")

</div>

I choose between two options, depending on the use case.

1. A new step, but I don’t copy it, I just make it a grey background. (For Maintenance reasons, and to prevent users changing data by navigating with Tab.)

2. A Custom widget that simply pops a

```auto
confirm(message);

```

with a given message and returns the user input (`OK` or `Cancel`)  
 → The layout and position is Browser default. So it appears differently on different browsers / devices…