4

We have a Help button in the header of our product, directly next to the Log Out button.

We also have modal lightboxes that, when activated, grey-out the buttons in the header, even though they are still needed when the lightboxes are activated.

What would be the best way to make sure those header buttons can still be accessed? I don't want to repeat the buttons inside of the lightboxes, obviously.

Improve this question
4
  • You may want to move Help link further away from Log Out to avoid accidental clicking.
    – dnbrv
    Jan 10, 2012 at 22:15
  • @Olivia It sounds like you know your lightbox will require some help, so why not have the button available in the lightbox? I guess it's not so obvious to me.
    – Taj Moore
    Jan 10, 2012 at 22:56
  • Why making a lightbox covering the entire window? Seems like you want to lightbox a smaller area.
    – JOG
    Jan 11, 2012 at 10:00
  • Thanks for your suggestions. I didn't want to duplicate the button in the lighbox because it was confusing with the exact same button outside of it, just greyed out. I think lightboxing a smaller area will work.
    – Olivia
    Jan 11, 2012 at 17:12

3 Answers 3

Reset to default
3
  • You could offset the area the lightbox covers by a certain number of pixels from the top so that the entire upper header is still fully visible and responds to interaction.
  • You could change the z-index of the header when you activate the lightbox so that it pops up over the lightbox
  • You could copy the Help button into the lightbox (which you indicated you don't want to do)

I'd probably go with option #1 and see how it impacts the lightbox.

Ultimately I would probably reconsider whether a modal lightbox is necessary. For instance, for viewing photo slideshows, Facebook has a great non-modal solution. Perhaps you can take away some lessons from their approach.

Improve this answer
2
  • z-index of the header can be set high permanently, too (less coding).
    – dnbrv
    Jan 10, 2012 at 22:14
  • Modifying the z-index is an idea I hadn't thought of, I'll definitely look into that, thanks.
    – Olivia
    Jan 11, 2012 at 17:14
2

Modals like a lightbox are modal for a reason; all interaction is supposed to be contained within that modal window. That's actually what "modal" means in this context; it is a different mode of interaction. See my answer on What's modal about a modal dialog?

Apple's iOS Human Interface Guidelines give some good tips on creating modal tasks. Your modal should be something simple with all necessary interactive elements contained in the modal; for instance a sign up form with username, password and a submit button only.

If you really require interactive elements beyond the modal window, consider making the task part of an ordinary page; it doesn't seem like you need to take the user into a different "mode" at all if you still need the header.

Improve this answer
1

You are asking how to create active buttons on the page the modal appears on. That's contradictory to the definition of a modal. the entire purpose of a modal is that you need to interact with it before you can continue acting with the rest of the page/site.

I'm thinking the solution is to rethink this entire interaction. What benefit is the modal providing?

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.