Elegant Multifunctional Popup Plugin For jQuery - Focus.js

Elegant Multifunctional Popup Plugin For jQuery - Focus.js

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',
    //  the selector for the area outside of the popup, when clicked the popup will close.
    innerSelector: '.popup-inner',
    // 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 {
  /* 
    ... 
  */
}

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

  • Publication date: 07.11.2017
  • Source