Focus is a minimal popup, modal, overlay, notification, drawer and dialogue window plugin built by Elkfox.


  • jQuery >= 1.3


  • Under 4 KB
  • Easy to use data API
  • jQuery events

Getting Started

Grab focus.js or focus.min.js from the repository.

Include the script in your html file.

<script src="<path_to_javascript_files>/focus.min.js"></script>

Or if you’re using Shopify include the following in your theme.liquid

{{ 'focus.min.js' | asset_url | script_tag }}

Optionally include the styles located in the css directory of the repository.

Include add a popup with this basic structure.

  <button data-trigger="popup" data-target="#examplePopup">Click Me</button>

    <div class="popup overlay" id="examplePopup">
      <div class="popup-inner">
        <div class="popup-content left">

          <h2>Hello world!</h2>

          <a class="popup-close" data-close aria-label="common.close">Close popup</a>

Now whenever someone clicks the “Click Me” button it will open the #examplePopup popup 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 popup that it is contained within.

Here we also use .popup-inner to close the popup when a user clicks outside of the popup.

The user can also use the escape key to close popups.

Here we are using the simple data api to get started which consists of the following:

  • data-trigger="popup"
  • data-target="#examplePopup"
  • data-close


In some cases you may wish to fire your popup from within your JavaScript.

Say for example when a user scrolled a specific part of the page.

  <div class="popup overlay" id="scrollPopup">
    <div class="popup-inner">
      <div class="popup-content left">

        <h2>👏 Now you're really getting focused!</h2>

        <a class="popup-close" data-close aria-label="common.close">Close popup</a>

  <h2 id="scrollTrigger">Scroll to here I dare you</h2>
    // In this scenario we need to initialise our popup with JS
    var scrollPopup = new Focus('#scrollPopup');

    // Now scrollPopup has access to .hide .show and .toggle methods
    // The following js is use to detect how far we have scrolled.

    $(document).on('scroll load resize', function(){
      var docTop = ($(document).scrollTop() + $(window).height());
      var scrollTrigger = $('#scrollTrigger').offset().top;
      if( docTop > scrollTrigger && docTop < (scrollTrigger+100) ) {
        // Now we have scrolled far enough lets open the popup 🎉

Scroll to here I dare you 👻


You may wish to configure your popup with some settings that are different to the defaults used above. You can control these on a per popup basis using the Focus constructor.

  var scrollPopup = new Focus('#scrollPopup', {
    visibleClass: 'active',
    innerSelector: '.outer-popup',
    autoFocusSelector: '[name="search"]'
Option Default Type Description
visibleClass visible string Set the visible class that gets added to show the popup.
bodyClass active-popup string Class name applied to the body when the popup is opened.
innerSelector .popup-inner string Set the selector for the area outside of the popup, when clicked the popup will close.
autoFocusSelector [data-auto-focus] string Set the selector of an input field that you would like to be focused when the popup opens.
popupContent .popup-content string Set the selector of the popups content.
avoidSubpixels false boolean Use javascript to stop the css from placing the popup on a subpixel value.

jQuery Events

The following events occur when opening, closing, or toggling a popup

Event Parameters Description
focus:open None Fires when a popup has finished opening
focus:close None Fires when a popup has finished closing
focus:error error (String) Fires when an event cannt open or close. Passes the error the event



We provide some css and scss files located in the css/ folder that has been pulled from our in house framework Concrete. Variables located at the top of the file are the easiest ways to modify the colours of the popup.

Table Of Classes

Class Description
.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 of the div this will open the popup with an opaque background overlay
.full-screen Opens a 100% width and 100% height popup.