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, and customize them Rectangle so that it looks like a dialog. Then, add a ‘Close’ icon to the dialog. Ours is from the Font Awesome library, but any icon will work.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 as the target to be moved. Below, set the X and Y positions to “With cursor”.
  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 as the target to be hidden.
  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 when the user clicks, 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.
  4. Click “Simulate”. Click the button. Your dialog will appear and you’ll 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.
modal dialog interact

  1. In the prototype that contains your animated dialog, drag a Rectangle to the Canvas and resize it so that it covers the entire Canvas. 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 in the properties palette.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”. Add an “On Click” + “Show” event, selecting the modal Rectangle to be shown with a “Fade” effect.
  4. Back in the Events palette, change the link between the two interactions to “WITH previous”.
  5. Back in the Canvas, select the Close icon that you added an Event to before. Click the gear icon and choose “Add action”. Add an “On Click” + “Hide event, selecting the modal Rectangle to be hidden, changing the effect to “Fade”.
  6. Back in the Events palette, change the links between the two interactions to “WITH previous”.
  7. Click “Simulate”. Click the button and your dialog will appear with a dark background behind it.

You can download our example here.