citywebshop_cms/uix/js/uglipop.min.js

/*|--uglipop.js--|
|--(A Minimalistic Pure JavaScript Modal )--|
|--Author : flouthoc (gunnerar7@gmail.com)(https://github.com/flouthoc)--|
|--Contributers : Add Your Name Below--|
|-- zhuharev (kirill at zhuharev.ru)(https://github.com/zhuharev)--|
|--Nicolas Dietrich (https://github.com/nidico)--|*/

(function(w, doc) {
    "use strict";

    var initted = false

    function on(el, eventName, handler) {
        if (el.addEventListener) {
            el.addEventListener(eventName, handler);
        } else {
            el.attachEvent('on' + eventName, function() {
                handler.call(el);
            });
        }
    }

    function init() {
        if (initted) return;

        initted = true
        
        var overlay = doc.createElement('div');
        var content_fixed = doc.createElement('div');
        var popbox = doc.createElement('div');
        var overlay_wrapper = doc.createElement('div');
        content_fixed.id = 'uglipop_content_fixed';
        content_fixed.setAttribute('style', 'position:fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);opacity:1;');
        popbox.id = 'uglipop_popbox';
        overlay_wrapper.id = "uglipop_overlay_wrapper";
        overlay_wrapper.setAttribute('style', 'position:absolute;top:0;bottom:0;left:0;right:0;');
        overlay.id = "uglipop_overlay";
        overlay.setAttribute('style', 'position:fixed;top:0;bottom:0;left:0;right:0;opacity:0.3;width:100%;height:100%;background-color:black;');
        overlay_wrapper.appendChild(overlay);
        content_fixed.appendChild(popbox);
        doc.body.appendChild(overlay_wrapper);
        doc.body.appendChild(content_fixed);
        doc.getElementById('uglipop_overlay_wrapper').style.display = 'none';
        doc.getElementById('uglipop_overlay').style.display = 'none';
        doc.getElementById('uglipop_content_fixed').style.display = 'none';
        //overlay_wrapper.addEventListener('click', remove);
        on(w, 'keydown', function(e) {
            //kill pop if button is ESC ;)
            if (e.keyCode == 27) {
                remove();
            }
        });


        //create global variables
        w.uglipop = uglipop
        w.removeuglipop = remove
    }

    function uglipop(config) {

        if (config) {
            if (typeof config.class == 'string' && config.class) {
                doc.getElementById('uglipop_popbox').setAttribute('class', config.class);
            }
            if (config.keepLayout && (!config.class)) {
                doc.getElementById('uglipop_popbox').setAttribute('style', 'position:relative;height:300px;width:300px;background-color:white;opacity:1;');
            }

            if (typeof config.content == 'string' && config.content && config.source == 'html') {
                doc.getElementById('uglipop_popbox').innerHTML = config.content;
            }

            if (typeof config.content == 'string' && config.content && config.source == 'div') {

                doc.getElementById('uglipop_popbox').innerHTML = doc.getElementById(config.content).innerHTML;

            }
        }

        doc.getElementById('uglipop_overlay_wrapper').style.display = '';
        doc.getElementById('uglipop_overlay').style.display = '';
        doc.getElementById('uglipop_content_fixed').style.display = '';


    }

    function remove() {
        doc.getElementById('uglipop_overlay_wrapper').style.display = 'none';
        doc.getElementById('uglipop_overlay').style.display = 'none';
        doc.getElementById('uglipop_content_fixed').style.display = 'none';
    }

    //init on window loaded
    on(doc, "DOMContentLoaded", init)
    on(doc, "load", init)
})(window, document)