HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Make CSS popups (lightbox?) go away when clicking background

edited April 2012 in Feedback

Several features in Vanilla Forums appear as a CSS / JS Popup (I think "Lightbox" is the right term?). For example: the "Sign In" function.

It's kinda inconvenient that these popups don't close when clicking outside / in the background. If you clicked something by accident or it's not what you were looking for, you have to explicitly click the 'X', or actually look at the content and click Cancel or Abort or Back etc (if it's there, not always, e.g. 'Preview').

Also, on many other sites, popups like these cause the background to go dark which make them stand out a bit better.

My two suggestions:

  • Make any popup discardable by clicking anywhere outside

  • Make the background dim (by a partially transparent black layer) when a popup appears

Good idea?


  • 422422 Developer MVP

    thats built in anway

    There was an error rendering this rich post.

  • 422 said:
    thats built in anway

    Uhm, I must be missing it somehow. It doesn't seem to happen by default (at least not here in my Firefox 11.0 using latest Vanilla default install, or this very forum here). Should I enable or configure this somewhere?

    Thanks in advance!

  • 422422 Developer MVP
    edited April 2012

    Overlay handles the overlay.... so you can add bg colour to that.

    If you set opacity inline via css, it will screw up the Popin.

    You would need to initiate this via JS.

    As for the close outside of the Popin again this is dooable, but would need core changes to the plugin.

    I wouldnt do that tho, as it ISNT a gallery plugin, where people willy nilly open and close modal windows.


    There was an error rendering this rich post.

  • Sorry, maybe this is a stupid question (I couldn't find it after googling) but exactly where do I configure this Overlay thing and its bg color?

    (I am familiar with css and js, no problem, but I'm totally new to VF and still clueless as to where or how to change things like this)

  • 422422 Developer MVP

    css , use firebug

    There was an error rendering this rich post.

Sign In or Register to comment.