iPad popover - tap outside to close?

I’m trying to simulate the iPad’s popover functionality. I have a button shape that reveals the popover (dynamic panel) on click/tap.

Is there a way to make it so any click outside the popover closes it? Currently, I see no way to initiate the hiding of this panel via a click unless I set an OnClick event to a specific target (e.g.: the iPad app on the Samples page uses close buttons in the popovers). What I really want is to initiate the response when there is a click anywhere except on a specific target.

Only thing I can think of is: any time the popover is open, have the rest of the screen outside of the popover occupied by a giant, invisible button that will close the popover on click. Rather inelegant, but might work.

Any better ideas?

Hi budesigns, I think you’re on the right track with the giant button behind the popover. The image map region widget is good for that. It’s basically a transparent rectangle.

Hey budesigns,

victor, as always, is on the money. I would recommend putting the detector (image map) and content in a dynamic panel, so its visibility can be toggled.

light_forger

If I understand your question, I have written a tip - really simple way to do this:

Hiding panels on click away

1 Like

hmm, I thought I posted in here. Try this, maybe it works on an ipad:

Hiding panels on click away

1 Like

Tried using ‘OnPageClick’ under Page Interactions? OnPageClick> Hide <selected dynamic panel>. Worked for me.

Another option, not available when this thread was started, is to use the “show as lightbox” option when you show the popover panel to begin with. The functionality to hide the panel on a click outside its perimeter is built in. You can configure it to eliminate the familiar background shading of the lightbox if that’s not what you’re going for.

Jeff

Hi Jeff,

I tried the ‘show as lightbox’ option w/ clear background. But that resulted in a slight anti-alias effect (on text beneath the light box background) when the lightbox toggled. Not sure if that pertains just to my display, or Axure.

Hi Kirandhotre,

Thanks for pointing this out. Can I assume you’re using Safari to view the output? The effect you’re describing–anti-aliasing–is indeed the resultant behavior of using the Lightbox feature with a transparent background. However, this seems to be rendering differently across browsers; for example, if you view the transparent background on Chrome or FF, you shouldn’t see the effect.

At any rate, I’ll certainly submit this report for you to see whether there’s a way for us to effect more consistent behavior across browsers. In the meantime, I think your previous method of using OnPageClick is a good alternative.

Thanks!
Alex

Not long ago I played with dynamically centered lightboxes for desktop. I think the same approach can be used for mobile. Here is the thread if anyone is interested:
Dynamically Centered Lightbox

light_forger

Yeah this is the best approach.
Treat as a lightbox and set the background opacity of the lightbox to 0 opacity.
This is a lot neater but the other suggestion of gejoreni’s was very creative.

Hey,

I had an use case where user right clicks on an icon and context menu appears (OnContextMenu event).
If the user clicks outside, the menu has to dissapear. I tried ‘Treat as Lightbox’ option and set the background color to transparent, it worked well for me.

Thanks,
Vinoth

did you try the ‘treat as lightbox’ feature. I think it is on ‘show’.
that might do the trick.

Coming to this late in the day …but just goes to show that lots of us are solving the same problems

@antistandard had the solution.

  • OnClick show widget
  • Treat as Lightbox
  • Set opacity slider under Background color to 0

That solves it!

Just use “treat as lightbox” in the “more options” when you set your Pop-Over for “Show/Hide”.

1 Like