README
Overlay
Overlay component that can be opened and closed via OverlayButtons. Supports:
- close when user presses esc (optional)
- close when user clicks outside (optional)
- disable body scroll
- any number of open/close/toggle buttons that control the overlay
- the use of any background element through a selector and any class on that background element to make it visible
Important
Load <overlay-component>
before <overlay-button-component>
as the button needs the overlay
to exist before it is setup (setModel will not be called if <overlay-component>
does not
exist).
If you want to disable scroll when the overlay is open, use Body Scroll Lock:
import { disableBodyScroll, enableBodyScroll } from '/body-scroll-lock/lib/bodyScrollLock.es6.js';
const overlay = document.querySelector('#my-overlay-identifier');
overlay.addEventListener('open', disableBodyScroll);
overlay.addEventListener('close', enableBodyScroll);
Example
<overlay-button-component data-overlay-name="myOverlay" data-type="open">
Open Restricted
</overlay-button-component>
<overlay-component
data-name="myOverlay"
data-background-selector=".overlay-background"
data-background-visible-class-name="visible"
data-visible-class-name="visible"
data-disable-esc="true"
data-disable-click-outside="true"
>
<overlay-button-component data-overlay-name="myOverlay" data-type="close">
×
</overlay-button-component>
</overlay-component>
<!-- Import all components you use -->
<script src="@joinbox/overlay/OverlayElement.js"></script>
<script src="@joinbox/overlay/OverlayButtonElement"></script>
Components
Overlay
Exposed Element
<overlay-component></overlay-component>
Attributes
data-name
: Names the overlay; the name must exactly match attributedata-overlay-name
onoverlay-button-component
to be opened/closed by it.data-visible-class-name
: Contains the class name that will be added to the overlay when it is opened and removed when it is closed.data-background-selector
: Takes any CSS selector and defines the element that will receivedata-background-visible-class-name
when the overlay opens.data-background-visible-class-name
. Defines the class that will be added to the background element when the overlay is opened and removed when the overlay is closed.data-disable-esc
: Prevents the overlay from being closed when users press the ESC key. Defaults to false.data-disable-click-outside
: Prevents the overlay from being closed when users click with their mouse outside of the overlay. Defaults to false.
Events
openOverlay
: Dispatched after an overlay is opened; bubbles and has adetails
object with aname
property that corresponds to the overlay'sdata-name
attribute value.closeOverlay
: Dispatched after an overlay is closed; bubbles and has adetails
object with aname
property that corresponds to the overlay'sdata-name
attribute value.
Overlay Button
Exposed Element
<overlay-button-component></overlay-button-component>
Attributes
data-overlay-name
: Contains the name of the overlay that should be opened or closed. Make sure it exactly matches the attributedata-name
onoverlay-component
.data-type
is eitherclose
, if the button shall only close the overlay,open
if the button shall only open the overlay ortoggle
if the button shall toggle the overlay. Defaults totoggle
.data-open-class-name
: Class name that will be added to the button when the overlay is opened.data-closed-class-name
: Class name that will be added to the button when the overlay is closed.