popin

Create your custom popin. You can use this module with browserify and require('popin').

How it works

The plugin will look for all element who have the js-popin class and bind it to open a div with an id equal to the data-target or a content past in params.

Example :

<a href="#" class="js-popin" data-target="popin-alpha">test popin</a>
 
<div id="popin-alpha" class="popin">
    <div class="popin-header">
      <a class="js-popin-linkClose popin-header-linkClose" href="#" title="">Fermer X</a>
    </div>
    <div class="popin-content">
      <!-- popin content goes here -->
    </div>
</div>

Installation

You can use the minified file in lib/popin.js for production or if you use Browserify, you just have to require('popin') and npm i

Setup

Simply create a new instance of the Popin object.

var Popin = require('popin');
 
document.addEventListener('DOMContentLoaded', function () {
  var popinInstance = new Popin();
  popinInstance.init();//all popins will instancied with default params
}, false);
 

CSS

Copy the styles in styles/popin.scss in your css or import the file in your scss.

Defaults parameters

var defaultParams = { overlay : true }

Use custom init params

var popinInstance = new Popin({
  overlay:false //to disable overlay for all popins
});

Defaults options

var defaultOptions = { className : "js-popin", //css class overlayVisible : true, //show the overlay for the popin closeButton : true //the popin have close button }

Use custom init options

You can use a custom class to trigger your popin, in the initialisation you just need to pass an object like this :

popinInstance.init({
  className:'customClass', //element in DOM to trigger click
  overlayVisible : false, //disable the overlay for the popin
  closeButton:false, //if you don't need close button
  content:'<div><div class="popin-header"></div>popin ajax</div>',//popin content not in default DOM loaded,
  buttonSticky:true //to sticky the top of the popin at the top of the button
});

<a href="#" class="customClass" data-target="popin-beta">test popin</a>

callback

You have 4 callback options

popinInstance.init({
  beforeOpen: function() {}, //trigger before the openning
  afterOpen : function() {}, //trigger when the popin is visible in the screen
  beforeClose:function() {},  //trigger before the closing
  afterClose:function() {} //trigger when the popin is out of screen
});

Support

This module uses classList who isn't available on IE9 and below, if you have to play around just use a polyfill 😄