Forum Academy Marketplace Showcase Pricing Features

Close Popup with Back Button (Browser & Moble)

So, a few people have been asking this, and there have been a number of great solutions out there, but none that I felt were elegant enough, especially if you use animated popups or multiple popups over each other (e.g. a popup form with an additional confirmation popup on save).

The typical way of thinking is “I need to change the behaviour of pressing back in the browser.” The method outlined here reverses that thinking and uses “back” as the desired behaviour, replacing click-close events with the “go to previous page” workflow action.

The main reason for doing this is that it keeps everything neat - if you use a combination of regular “click to close” and “back to close” you can end up in a weird loop. making everything a “back to close” (even though you click close) tidys up all the loose ends.

Confused already?

Step 0 (I forgot this)

For this to work, you ideally want to prevent users from pressing ESC or clicking outside your popup to close it. You can probably get away with it on single-level popups, but definitely need it if you have multi-level popus

Step 1

Set up your url-reset page load event - this is to clear parameters from the page (which we’ll use later). This ensures users who navigate to a page with your popup parameters set (e.g. mysite.com/my_page?popup=something) when you don’t have any popups open are redirected to the page without popup parameters set (e.g. mysite.com/my_page)

This is simply: When Page is loaded and myPopup isn’t visible (ensure you list all popups for the page here) and the popup parameter is not empty, then go to the same page with the parameter section blank

Step 2

Set up your popup hiding page load event

This is simply When Page is loaded and the popup parameter is empty, then animate/hide any popups (enter all your popups here)

Step 3

Replace all your popup close events with the “go to previous page” workflow action, instead of your typical “animate” or “hide” popup action:

Step 4

This is probably the trickiest step (or the most confusing), but this is where is all comes together. Here’s where we animate/show our popups when when they’re called and set the popup parameter to tell the page which popup can be open (other implementations will use the parameter to tell the page which popups are open, which is more complicated to manage)

When Button Open Popup is clicked (assuming you’re using a button), animate/show popup (as per normal), then go to (navigate) your page and send popup parameters to the page

In this example, you can see that I have used popup = A - this is because I am layering popups over each other. If you are only going one level deep, you could use popup = true or anything else - note that you are not identifying which popup is open, only that a popup is open and (if necessary) whether it’s a first level popup or a secondary popup on top of another popup.

And that’s it, you’re done!

Step 5 (bonus step)

If you’re using secondary popups, each one of these you set your parameter as something else - personally, I have used popup = B (to signify a secondary popup)

Essentially, the actions are exactly the same, except you animate/show your sceondard popup and use your secondary popup parameter with the page navigation action

And finally, you need another page load event to hide secondary popups when the loaded page has your primary popup parameter (i.e. popup = A)

Essentially this is the same as Step 2, but we’re hiding B level popups and keeping A level popups that were already open

In Summary

I expect this to be quite confusing, but once you’ve worked out the bones of it, you’ll find it super easy. I’ll eventually add a demo you can look at

1 Like