Focus is a minimal popup, modal, overlay, notification, drawer, accordion and dialogue window plugin built by Elkfox.
- Under 4 KB
- Easy to use data API
- No dependencies
focus.min.js from the repository.
Include the script in your html file.
Or if you’re using Shopify include the following in your
Optionally include the styles located in the css directory of the repository.
Include add a Focus element with this basic structure.
Now whenever someone clicks the “Click Me” button it will open the
#examplePopup Focus element which
contains a button to close the modal. Pretty easy!
Note that the data-close doesn’t have a data-target attribute. When this is the case data close will close the Focus element that it is contained within.
Here we also use
.popup-inner to close the Focus element when a user clicks outside of the popup.
The user can also use the escape key to close Focus elements.
Here we are using the simple data api to get started which consists of the following:
Say for example when a user scrolled a specific part of the page.
Scroll to here I dare you 👻
Accordion open by default
Accordion closed by default
You may wish to configure your Focus element with some settings that are different to the defaults used above. You can control these on a per Focus element basis using the
||string||Class name applied to the body when the Focus element is opened.|
||string||Set the target class that gets added to the Focus element trigger.|
||string||Set the visible class that gets added to show the Focus element.|
||string||Set the selector for the area outside of the Focus element, when clicked the Focus element will close.|
||string||Set the selector of an input field that you would like to be focused when the Focus element opens.|
||boolean||Uses jQuery slideDown and slideUp functions for hiding and showing the focus element, useful for creating accordions.|
||number/string||Set the speed of the jQuery slideDown and slideUp functions.|
||boolean||Move the element to the end of the body on initialisation.|
||boolean||Set to true if the focus element is visible by default.|
||function||Callback function for when a popup is successfully shown.|
||function||Callback function for when a popup is successfully hidden.|
||function||Callback function for when a popup could not be hidden or shown.|
We provide some basic popup styling CSS and SCSS files located in the
css/ folder that have been pulled from our in-house framework Concrete. Variables located at the top of the file are the easiest ways to modify the configuration of the popup.
Table Of Classes
|.popup||The parent class of the popup.
Should be added to the starting element of every popup to apply styling.
|.overlay||When added to the starting element, this will open the popup with a semi-transparent background overlay.|
|.popup-outside||The outside area of the popup, used for closing the Focus element when clicked.|
|.popup-inner||The vertically and horizontally centered popup element.|
|.popup-content||The contents of the popup, this will scroll vertically if the content height exceeds the window height.|