2.3.8 • Published 10 years ago

popin v2.3.8

Weekly downloads
16
License
ISC
Repository
github
Last release
10 years ago

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 :smile:

2.3.8

10 years ago

2.3.7

10 years ago

2.3.6

10 years ago

2.3.5

10 years ago

2.3.4

10 years ago

2.3.3

10 years ago

2.3.2

10 years ago

2.3.1

10 years ago

2.3.0

10 years ago

2.2.8

10 years ago

2.2.7

10 years ago

2.2.6

10 years ago

2.2.5

10 years ago

2.2.4

10 years ago

2.2.3

10 years ago

2.2.2

10 years ago

2.2.1

10 years ago

2.2.0

10 years ago