Designing dialogs

With Justinmind, you can create dialogs and popups in your prototypes.

In this tutorial, you’ll learn how to create three types of dialog: basic, animated and modal:

Basic dialog

Follow these steps to create a basic dialog that can be dragged and dropped, and closed by clicking the ‘X’ icon.

drag drop dialog

  1. In a new web prototype and drag a Text widget, a Paragraph widget and a Rectangle to the canvas. Rename the Text element “Basic Dialog”, write a description of what this dialog does in the Paragraph element and customize the Rectangle so that it looks like the background of a dialog.
    • Then, from the Font Awesome Widget library (download it here) add the Close icon to the Dynamic Panel.
    • Place the Text, Paragraph and Close elements on top of the Rectangle to match our example.
    • basic dialog change
  2. Select all of the elements on the canvas, right click within the selection and select “Group in Dynamic Panel”.
    • group dynamic panel
  3. Now select the Dynamic Panel and go to the Events palette. Click “Add Event” and add an “On Drag” + “Move” event, selecting the Dynamic Panel from the Outline palette.
    • Below, set the X and Y positions to “With cursor” and click “OK”.
  4. Back in the canvas, select the Close icon from within the Dynamic Panel and go to the Events palette.
    • Add an “On Click” + “Hide” event, selecting the Dynamic Panel from the Outline palette. Click “OK”.
  5. Back in the canvas, click “Simulate” to view and interact with your basic dialog. Select the Dynamic Panel and move it around the screen with your mouse. Close it by clicking the Close icon.

You can download our example here.

Animated dialog

Follow these steps to create an animated dialog that appears upon user interaction and can be closed by clicking the Close icon.

animated dialog

  1. In the prototype that contains your basic dialog, select the Dynamic Panel and mark it as hidden in the Properties palette (“Hide component”).
    • hide component
  2. Back on the canvas, drag a Button widget above the Dynamic Panel and customize it to match our example.
    • customize button widget
  3. With the Button selected, go to the Events palette.
    • Add an “On Click” + “Show” event, selecting the Dynamic Panel.
    • Below, add a “Slide Up” effect, choosing your selection from the “Effect” drop-down. Click “OK”.
  4. Click “Simulate”. Click the button. Your dialog should appear and you should be able to move it around the screen with your mouse, and close it by clicking the Close icon.

You can download our example here.

Modal dialog

Follow these steps to create a modal dialog that forces the user to interact with it before they can go back to the main screen or parent application.

In our example, we’ll add a dark background behind the dialog so that the user is required to interact with it.

modal dialog interact

  1. In the prototype that contains your animated dialog, drag a Rectangle to the canvas.
    • Resize it so that it covers the entire canvas and place it underneath the Dynamic panel in the Outline palette.
    • You can change the order of elements by right clicking on them and choosing from the “Order” options. Alternatively, change the hierarchy of elements in the Outline palette.
    • modal dialog
  2. Go to the Properties palette, make the Rectangle dark gray, change its transparency to “40%” and mark it as hidden.
    • rectange dark gray
  3. Back in the canvas, select the Button that you added an Event to before.
    • Click the gear icon and choose “Add action”. Change to a “Show” event, selecting the Rectangle from the Outline and changing the effect to “Fade” below. Click “OK”.
    • Back in the Events palette, change the link between the two interactions to “WITH previous”.
  4. Back in the canvas, select the Close icon that you added an Event to before.
    • Click the gear icon and choose “Add action”. Change to a “Hide” event, selecting the Rectangle from the Outline and changing the effect to “Fade” below. Click “OK”.
    • Back in the Events palette, change the links between the two interactions “WITH previous”.
  5. Click “Simulate”. Click the button. Your dialog should appear with a dark background behind it. You will be able to interact with it as before.

You can download our example here.