var createPopup = require('popoff');

//create and show modal
var modal = createPopup({
    type: 'modal',
    content: `
        <h2>Blah</h2>
        <p>blah</p>
    `
});
modal.show();

//create and show dropdown
var dropdown = createPopup({
    target: '#menu',
    type: 'dopdown',
    content: document.querySelector('#content')
});
document.querySelector('#menu').click();

var popup = new Popup({
    // modal, dropdown, tooltip, sidebar work out of the box. Otherwise define custom options below. See demo for examples.
    type: 'modal',

    // target element that enables the popup, e.g. button.
    target: null,

    // an element to place popup into
    container: document.body || document.documentElement,

    // show overlay, will be detected based off type
    overlay: true,

    // show close button
    closable: true,

    // close by escape
    escapable: true,

    // show tip
    tip: false,

    // animation effect, see effects in the demo page
    effect: 'fade',

    // additional style rules for popup
    style: {},

    // shift main content on defined amount. Useful in case of sidebars
    shift: 120
});

//show popup relative to the target, invoke callback after animation end
popup.show(target?, callback?);

//hide popup, invoke callback after animation end
popup.hide(callback?);

//update popup position, in case of resize etc.
popup.update({
    target: this._target || this.target,
    side: this.side,
    align: this.align,
    within: window
});

//events
popup.on('show', () => {});
popup.on('afterShow', () => {});
popup.on('hide', () => {});
popup.on('afterHide', () => {});
popup.on('update', () => {});