popin/demo/app.js

Create your custom popin

var Popin = require('../lib/popin');


document.addEventListener('DOMContentLoaded', function() {
 /* var test = new Popin({className:'js-newpopin'});
  /*test.open();
  var popin2 = new Popin({className:'js-popin2'});
  console.log(popin2.defaultOptions);
*/


  var popinInstance = new Popin();

  popinInstance.init({buttonSticky:true,afterClose:function(){}});

  popinInstance.init({className:'test',closeButton:false,content:'<div><div class="popin-header"></div>popin ajax</div>'});
  popinInstance.init({className:'test2',closeButton:false,content:'<div><div class="popin-header"></div>popin ajax 2</div>'});

  $('.js-popinAjax').on("click",function(){


    $.ajax({
      url: "ajaxContent.html",
      context: document.body
    }).done(function(data) {
      $('body').append(data + '<div id="fake-overlay" class="popin-overlay"></div>');
      $('#fake-overlay').addClass('popin-overlay--visible').on('click',function(){
        $(this).remove();
        $('#popin-ajax').remove();
      });
      $('#popin-ajax').addClass('popin--open').on('click','.popin-header-linkClose',function(){
        $(this).closest('.popin').remove();
        $('#fake-overlay').remove();
      })
    });
  });


}, false);