Is it good to have multiple steps in pop up?

Question

I have a card with edit option. When I click on edit a pop up will be displayed with 3 steps.

^{download bmml source – Wireframes created with Balsamiq Mockups}

^{download bmml source}

Is it good practice to include wizards in pop up?

As per UX article : Try to avoid dialogs with multiple steps. For reference: https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116#.nrl4a9ca8 [Point 3]

Answer 1

This would be Modal Window Basically. Yes,you can have 3 steps on a modal window just indicate the user the current state.

Modal Windows

A modal window is a secondary window that opens on top of the main one. Users have to interact with it before they can carry out their task and return to the main window. You should use modal windows when there are steps the user needs to do before the task can be completed. Using a modal window instead of a full page allows users to maintain the context of their task.

Include a clear, visible title that matches the clicked button

When a modal window opens, it’s important for users to know where it’s coming from. Your modal window should include a title that matches the button they clicked to open it. This shows consistent behavior and tells them what task they’re doing.

Allow users to close the window with the ESC key

For accessibility reasons, your modal window should close when users press the ESC key. You should also allow users to tab through controls in the modal window if you have them. This will allow users who use screen readers and keyboards to navigate your website.

Close the window when users click outside it

In case users can’t find your close button, allow them to close the window by clicking outside of it. This makes exiting easy and intuitive because users will often click on the main window to go back to it. But you don’t want to allow users to exit this way if they’re entering information on a form, otherwise they could lose it.

Use ‘Cancel’ buttons when necessary

Don’t make the window size too tall or wide

Make it as small as possible

Modeless windows should take up a very small amount of space on the main window. Make your modeless window as small and understated as possible, so that users can still interact with the main window. The main window is always the primary focus of the user’s task.

Hope this helps

Answer 2

That is the way wizards or steppers (as per the example you post) are usually presented, as a pop-up. So to answer the main question, yes.

However, it doesn't look to me you need steppers to edit the contents of the card:

Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation.

In order to use steppers you need a process that should be broke down due to length and that has different clear sections, for example:

Avoid using steppers to break up sections in a short form, or multiple times on one page.

---

Reference: Material Design - Steppers