Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to design dialogs and pop ups in your interactive wireframes


Design dialogs and pop ups in your interactive wireframes with the help of this tutorial.

Basic Dialog

In this first example, you can see a basic dialog, which can be dragged and dropped and closed by clicking on the ‘X’ icon.

You can download the example below here.

Interactive wireframes: basic dialog pop up

 

1) Create a new prototype and drag a Dynamic panel onto the canvas.

2) Go to the Properties tab and set the borders and background color.

3) Double click on it to edit its content, and insert a Text widget (write ‘Basic Dialog’), an ‘X’ Icon (you can find ‘X’ icons in some default widget libraries, e.g. in the Android icons one) and a Paragraph widget. Change their properties to match the style of the example image above.

Note: In order to edit the size of a text widget, you must unselect ‘AutoFit Text’ in the Properties tab.

4) Select the Dynamic panel and go to the Events tab. Click on ‘Add event’ button and choose an ‘On drag’ + ‘Move’ event (with the option “with cursor”).

5) Now select the X” Icon and click on the ‘+’ icon in the event tab: add an ‘On Click’ + ‘Hide’ action and select the Dynamic panel in the outline tab.

Note: you can add an effect to the Hide action to make it more appealing.

Interactive wireframes: basic dialog pop up events

6) Click OK and simulate. You’ll be able to move the Dynamic panel around and close it by clicking on the X.

Animated Dialog

You can download the example below here.

Interactive wireframes: animated dialog pop up

1) Follow the steps described for the Basic Dialog example above, including the events.

2) Select the Dynamic panel and make it hidden in the Properties tab (‘Hide component’).

3) Drag a Button widget onto the canvas and go to the Events tab.

4) Add an ‘On click’ + ‘Show’ event. Select the Dynamic panel and select also an effect (‘Slide up’, for instance). 

interactive-wireframes-animated-dialog-pop-up-events

5) Click OK and Simulate. You will be able to open the dialog by clicking on the button, and close it by clicking on the X.

Modal Dialog

You can download the example below here.

Interactive wireframes: modal dialog pop up

1) Follow the steps described in the previous example (Animated dialog).

2) Drag a Rectangle onto the canvas and place it over the Dynamic panel. Change its background to grey and change also its transparency, so that you can see the Dynamic Panel behind (50% should be enough).

3) Select the Dynamic panel in the outline tab, right-click on it and select Order>Bring to front.

4) Select the grey rectangle, go to Properties and mark it as hidden, by selecting the option ‘Hide component’.

5) Select the Button and add another event (‘On click’ + ‘Show’) to show the Rectangle along with the Dynamic panel.

Interactive wireframes: modal dialog pop up events

Now you can simulate, enjoy!

Next tutorial > Use Radio Buttons in input forms

4 Comments

  1. mark

    April 29, 2015 at 7:27 am

    when i create a dynamic panel and drag a widget into it, there doesn’t seem to be any way to position the widget within the panel. it’s locked, left justified one widget above the other.
    how do i position widgets within a dynamic panel?

    • Lidia Rodriguez

      July 6, 2015 at 10:30 am

      Hi Mark, to ensure the widget is inside the panel, right-click on the panel and choose ‘Edit content’. On the layout field of the properties tab, choose ‘Layout -> Free layout’.

  2. Ralph

    October 5, 2015 at 10:35 am

    I am currently trying to create a dialog, but I am not able to find a way to add an icon which can be used as the X to close the dialog.

    Also, if I understand it correctly, is the paragraph used for the Basic Dialog text and the X icon?

    • Danielle Schneider

      October 5, 2015 at 1:33 pm

      Check out different widgets, which should have a pre-made X icon for you. If you can’t find one, you can just insert your own ‘X’ and change it until it matches the desired style.

      You can use a paragraph or any other widget. It is not dependent on a certain widget.