• Home
  • Tutorials
  • Videos
  • FAQ
Community

  • Home
  • Tutorials
  • Videos
  • FAQ
    Report trouble

Any trouble with UXPin?

Tell us what's wrong:


How can we help?

Everything you need to succeed in UXPin
    Search
    Home Tutorials How-to Create a pop-up modal

    Create a pop-up modal

    Jul 14, 2017 Posted in: How-to Hits: 5543

    Pop-ups, as annoying as they might seem, when used right, can provide your users with the information they need at just the right time.

    In this case, we’ll show you how to go about creating a login modal. You will need:

    1. A black box that’s the size of your canvas
    2. A group made out of a box that will outline your modal with some content (images, text, input forms, etc.)
    3. An icon for closing the modal.

    Step 1 – create your modal background

    The easiest way to go about this is to draw a box and resize it, so it fits your canvas ideally.

    Then, in properties, change it’s color to black and opacity to 40%. Ta-dah!

    https://www.uxpin.com/community/wp-content/uploads/2017/07/box-back.mp4

     

    Make sure that this box is on top of all the other layers by moving it to the front.

    Step 2 – arrange your content

    Now, on top of the background box, place the main box that will serve as the modal background and add your content as well as the icon for closing the interaction.

    https://www.uxpin.com/community/wp-content/uploads/2017/07/1.mp4

    Step 3 – add closing interactions in the modal

    Once you’re done with arranging your content, add interactions that will close the modal. These will be simple “On click → hide” interactions. You can also simulate form validation by following the steps in this tutorial.

    https://www.uxpin.com/community/wp-content/uploads/2017/07/2.mp4

    Step 4 – hide your layers

    The next step here is to hide the modal layers using the eye icon next to the element name.

    https://www.uxpin.com/community/wp-content/uploads/2017/07/3.mp4

    Step 5 – add interaction to show the modal

    The final step here is to add an interaction that will prompt the modal to pop up. The easiest way to do it is to simply create an “On click → show” interaction on the chosen element.

    https://www.uxpin.com/community/wp-content/uploads/2017/07/4.mp4

     

    And you’re done! You’ve just created a beautiful modal, so take a look at how it works on the design preview:

    https://www.uxpin.com/community/wp-content/uploads/2017/07/5.mp4

    Worth reading:

    • Form validation
    • Interactions
    • Symbols
    0 people found this useful.   Login in to Vote Up!
    Not Helpful
    Report trouble
    Contact us: hello@uxpin.com @uxpin

    Login

    Connect with:
    Twitter