Cacher is the code snippet organizer for pro developers

$('.btn').on('click', function() {
  $('body').jpopup({
      text: 'Terminals with units will not be moved.',
      onConfirm: function() {
          //action
      }
  }).show();  
});

$el: '.jpopup';

#{$el} {
	background: #fff;
	width: 300px;
	padding: 10px;
	border: solid 4px #eaeba6;

	&__body, &__footer {
		margin-top: 10px;
	}

	&__footer {
		text-align: right;
	}

	&__btn {
		&+#{$el}__btn {
			margin-left: 5px;
		}
	}
}

;(function($) {
    "use strict";

    var Popup,
        pluginName,
        initEvents,
        setPosition;

    pluginName = 'jpopup';

    /**
     *
     * @private
     *
     */
    

    // init events
    initEvents = function(t) {
        $(document).on('click', '[data-action="'+ t.templates.buttons.confirm.data('action') +'"]', function(e) {
            e.preventDefault();
            e.stopPropagation();

            t.config.onConfirm();
            t.hide();
        });

        $(document).on('click', '[data-action="'+ t.templates.buttons.cancel.data('action') +'"]', function(e) {
            e.preventDefault();
            e.stopPropagation();

            t.config.onCancel();
            t.hide();
        });
    };

    // set position
    setPosition = function(t, elem) {
        var top, left, pos = {position: 'fixed', top: '50%', left: 0, right: 0, margin: '0 auto'};

        top = elem.offset().top;
        left = elem.offset().left;

        if(t.defaults.position) pos = {position: 'fixed', top: top + 'px', left: left + 'px'};
        t.templates.popup.css(pos);
    };

    /**
     *
     * @public
     *
     */
    

    Popup = function(elem, options) {
        this.elem = elem;
        this.$elem = $(elem);
        this.options = options;
        this.metadata = this.$elem.data('jpopup-options');
        this.init();
    };

    Popup.prototype = {
        defaults: {
            position: false,
            title: 'Warning',
            text: 'Do you really?',
            buttons: {
                confirm: 'Yes',
                cancel: 'No'
            },
            complete: null,
            onConfirm: function() {
            },
            onCancel: function() {
                Popup.prototype.hide();
            }
        },

        templates: {
            popup:
            $('<div class="jpopup">'+
                '<div class="jpopup__header"><h4 class="jpopup__title"></h4></div>'+
                '<div class="jpopup__body"></div>'+
                '<div class="jpopup__footer"></div>'+
            '</div>'),
            buttons: {
                confirm: $('<button class="jpopup__btn btn btn--gray-color btn--small btn--blue" data-action="jpopup-ok" type="button" />'),
                cancel: $('<button class="jpopup__btn btn btn--gray-color btn--small" data-action="jpopup-cancel" type="button" />')
            }
        },

        init: function() {
            // extend options
            this.config = $.extend({}, this.defaults, this.options, this.metadata);

            // init events
            initEvents(this);

            // set position
            setPosition(this, this.$elem);

            return this;
        },

        show: function() {
            $('body').append(this.templates.popup);

            this.templates.popup
                .find('.jpopup__title').html(this.config.title)
                .end()
                .find('.jpopup__body').html(this.config.text)
                .end()
                .find('.jpopup__footer').append(this.templates.buttons.confirm, this.templates.buttons.cancel);

            this.templates.buttons.confirm.text(this.config.buttons.confirm);
            this.templates.buttons.cancel.text(this.config.buttons.cancel);

            // call method after show popup
            if(typeof this.config.complete === 'function') this.config.complete();
        },

        hide: function() {
            this.templates.popup.remove();
        }
    };

    $.fn[pluginName] = function(options) {
        var $this = $(this), plugin;

        if ($this.data(pluginName)) {
            plugin = $this.data(pluginName);
        }
        else {
            plugin = new Popup(this, options);
            $this.data(pluginName, plugin);            
        }
    
        return plugin;
    };
})(jQuery);