How to add a back button to modal popups and fix styling of modal header

API & Customization
1

Here’s some code to fix a couple of problems with modal popup headers.

Problems fixed:

  • The header looks pretty average on mobile, especially when the “print” button is enabled
  • If you use multiple layers of modal popups, it’s difficult to navigate backwards one layer

What the code does:

  • Restyle the header to make it look a lot nicer on all devices
  • Add a “back” button next to the default “close” button to allow easy navigation backwards between modals

TLDR: copy-paste this code into your Knack JS and CSS area to install these features.

Video demonstrating the problem & how to install the code:

3 Likes
2

Thank you @Callum.Boase - a very useful feature for nested popups. Also nice update to the print button. Hopefully this restyle will be picked up at a product level @Kara @JohnKaras :+1:

1 Like
3

As always thanks.

1 Like
4

@NormandDefayette_CortexRD, @Callum.Boase do you think this could work in KTL. Maybe a flag to have it on or off and or a keyword

3 Likes
5

Ooh….that would be nice @CSWinnall :+1:

1 Like
6

Super nice!! Good job.

May I steal (or borrow!) your code to integrate it in the KTL?

Norm

7

I think this should be global flags.
Who would want to enable that per view…?

ND

1 Like
8

I’d like it to be enabled per view. It would be great if it was a keyword rather than a global flag.

The back link isn’t really required on a single modal. It’s really useful if you have nested modals and want to get back to the previous modal, otherwise you’d simply click “x” to close or click outside the modal to dismiss.

The relocated print link is really smart. No idea why this hasn’t been remedied directly by Knack. Wonder if it will be in the new gen builder :thinking:

1 Like
9

Hey Norm,
I’m happy (in fact I’m keen) for this to be included in KTL but I’d like the code to be attributed to me if I can commit my part of it to the repo. I’ll PM you to figure the logistics of that

10

Oooo just throwing my name into the hat for having this integrated into KTL! I (w/ Craig and Amanda’s support :smiley: ) have added a manual back button to almost ALL of the pages in my app. I tend to agree with Norm for my application it would be nice to have this be a global flag. But I see Carl’s point as well. Perhaps a global flag with the ability to turn it off on specific views?

2 Likes