Expose option to hide overlay about vex HOT 5 CLOSED

I know you mention it, but for those out there wondering, here are all of the ways you can do it now:

1. Set overlayClassName for a particular dialog and make that hidden in your stylesheet
2. Set overlayCSS for a particular dialog to { display: 'none' }
3. Style all overlays for a particular theme targeting .vex.vex-theme-default .vex-overlay

@m4nuC how would you want the option to actually implement the hiding?

Because, if you're thinking just add style="display: none" to it, I would argue that's redundant when overlayCSS accomplishes the same, and actually that the current way would be more clear:

vex.open
    content: 'Dialog without an overlay'
    hideOverlay: true

vs

vex.open
    content: 'Dialog without an overlay'
    overlayCSS: display: 'none'

If you're thinking it would remove it from the DOM entirely, that's a whole other story. I could maybe get behind that. Then I'd make the property something like useOverlay which would default to true. Thoughts?

from vex.

Actually I need to interact with whatever is beneath Vex when it's open. So my first idea was to hide the overlay but obviously that doesn't cut it as the .vex element takes up the whole view port. So I understand that this is an entirely different issue but do you see any way to make that happen?

As for the overlay hiding, i agree that it is straight forward enough to have it done with inline CSS, although i would personally prefer have a hideOverlay option like your exemple.

from vex.

There are a number of ways to allow interactivity with the page below a dialog:

1. Set appendLocation from "body" (its default) to the selector of an element on the page you control, and style that element with position: relative to contain .vex and its children. The Vex home page actually implements this method.

2. An approach that will work more universally is to use pointer-events. (But keep in mind the browser support for pointer events.)

   .vex
       pointer-events: none
   
       .vex-overlay
           display: none
   
       .vex-content
           pointer-events: all

from vex.

Thanks Adam, I will try the first method ( I need IE8 + support )

from vex.

No problem, happy to help

from vex.