Elegant Multifunctional Popup Plugin For jQuery - Focus.js

Elegant Multifunctional Popup Plugin For jQuery - Focus.js
File Size: 99.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Focus.js is a lightweight, flexible, elegant jQuery popup plugin which helps you create modals, dialog boxes, alert notifications, and other popup-style windows on the web app.

More features:

  • CSS3 based smooth animations.
  • Easy to style using your own CSS.
  • Allows to implement in pure JavaScript.
  • Supports jQuery events.

How to use it:

1. Include the main popup style sheet popup.css in the head of the html document.

<link href="css/popup.css" rel="stylesheet">

2. Include jQuery JavaScript library and the jQuery Focus.js script at the end of the html document.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="focus.js"></script>

3. Create the html for the popup window.

<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>
    </div>
  </div>
</div>

4. Toggle the popup window with a trigger button using data attributes:

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

5. Toggle the popup window using JavaScript:

var myPopup = new Focus('#examplePopup');
myPopup.show();

6. Default customization options for the popup window.

var myPopup = new Focus('#examplePopup',{

    // visibile class
    visibleClass: 'visible',

    // adds the class to the body when the popup is activated
    'bodyClass': 'active-popup',

    // the selector for the area outside of the popup, when clicked the popup will close
    innerSelector: '.popup-inner',

    // the selector for the content
    'popupContent': '.popup-content',

    // stops the css from placing the popup on a subpixel value
    'avoidSubpixels': false,

    // the selector of an input field that you would like to be focused when the popup opens
    autoFocusSelector: '[data-auto-focus]'
    
});

7. jQuery events supported.

  • focus:open: Fires when a popup is opened.
  • focus:close: Fires when a popup is closed.
  • focus:error error (String): Fires when an event can't open or close.

8. Override the default CSS rules to create your own styles.

.popup {
  /* 
    ... 
  */
}

.overlay {
  /* 
    ... 
  */
}

.full-screen {
  /* 
    ... 
  */
}

Changelog:

2018-06-20

  • v1.0.14

2018-06-18

  • Flex positioning (no more subpixels!)

2018-02-21

  • Targeted close events

2018-02-21

  • binding and unbinding event lsitens instead of using 'one()' which wil unbind the event once for the type rather than the selector.

2018-01-15

  • Adding additonal config and documentation, creating minified script.

This awesome jQuery plugin is developed by Elkfox. For more Advanced Usages, please check the demo page or visit the official website.