Balsamiq Community Discussion

Best way to show modal without creating a new mockup and avoid updating auto generated site map


#1

We have a deeply nested site and it is structured in a way so that the site map can be auto generated without any modifications.
Linking between pages or sidebar items is never a problem because each of them are a separate mock up.

What is the best way to embed a pop up though so that

  • When a user clicks on a add / delete button it shows up
  • We want to avoid having a modal added to the side of the window since that just displays how the pop up will look. We want the actual behavior to be shown instead.
  • We want to avoid creating another mock up, to prevent it from appearing in the auto generated site map.

I know one option is to add modal to the screen and mark it as markup and hide it. But it will then not display when the user clicks the add button.

Any thoughts or ideas, to mimic the actual behavior.


#2

Hi @Stallion_V,

Thanks for the post and the great question. While I fear that we’re leaving the realm of low-fidelity wireframing and moving more into prototyping territory (see: Why We Aren’t Doing Deep Interaction in Mockups) it’s possible that you could achieve the effect you’re looking for using alternates. See: Working with Alternates

Honestly, I’m not that sure it’ll work in a practical way because, while we support alternate versions of individual mockups, we don’t allow them to be explicitly defined as the target of a link. However, when a mockup which has alternates is linked, the link will go to the version of the mockup that is selected in the alternates list. So you’d just have to ensure that the alternate in question was first selected in the inspector.

The reason I mention it at all is that alternates won’t appear in the auto-generated sitemap so they do solve that problem.

Do you want to take a look at Alternates as a possibility and get back to me. Beyond that, I don’t think we have any other good way to do this…


#3

Thanks for the suggestion @alasdair. Gave it a shot but it did not work :cry: , since I am trying to practically open the pop up from the same window. In which case when I link the add button for pop up the only option I have is the current window and not the alternate.

One feature request though that can help is if we are able to add mock ups and right click them and mark as “Hide from site map”. That way they are considered mockups and can be linked but do not appear as part of the site map.


#4

Hi @Stallion_V,

I understand that this might not be the best workaround but a quick way to fix this would be to remove the mockup from the Site Map manually. You would simply need to double-click the Site Map and removed the modal screen mockup from there.

Would that work for you?


#5

A mechanism to allow items like menus, combo boxes and popups to show on top of an existing mock-up would be a significant time-saver.

Alternates are useful in exploring concepts but I wonder weather the concept of layers could be useful here. Being able to add a “pop-over” layer to my mockup and then toggle that layer with links in the mock-up would be tremendously useful.

Thought would need to be given to how to export to PDF or PNG. (Creating one page per layer per mock-up might be useful.)

Ultimately, this sort of concept would save time when tweaking mock-ups because I often find I only realise I need to create groups once I have developed out the concept and have lots of mock-ups that need the same thing changing manually. (And I get those duplicates because of menus, combo boxes and pop-overs.)


#6

Thanks for adding your thoughts to the discussion, @paulshoughton. I’m adding your suggestion in our internal tracker so we can talk about it with the team.

As mentioned above, this might be a little too much for our starter tool but it’s useful for us to hear your needs about this so thanks again!


#7

Hey @Stallion_V,
Please watch the GIF animation of how you can display a dialog on the same mockup:

Description:

  1. Set the dialog to treat as markup (via context menu or CTRL + SHIFT + K hotkey)
  2. Toggle the visibility of the dialog by toggling markup (via menu or CTRL + K hotkey)

#8

@paulshoughton +1 for the layering idea :bulb:
@Alexey_Kolchenko thanks for the gif, yes this was one of the ways I was doing the workaround, but that also was bringing up the markup notes. But that’s a good hack I agree.

@Virgin the problem with double click or other approach is if someone else is collaborating they would need to be told and the step has to be done each time. Feature for marking it to hide will take care of it always. Hoping you can talk about this as well in your discussions. Thanks so much :pray:t2: