JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

CSS

body {
    background: darkgrey;
}

.appMsg-overlay {
    background: rgba(0,0,0,0.4);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.appMsg-overlay div {
    text-align: center;
    background: white;
    padding: 12px;
    position: relative;
    margin: auto;
    width: 50%;
    max-width: 500px;
    min-width: 200px;
}

JavaScript

$.appMsg = {
    config: {
        class: "appMsg",
        title: null,
        html: null,
        ok: $.noop(),
        cancel: $.noop,
        texts: {
            ok: "OK",
            cancel: "Cancel",
            yes: "Yes",
            no: "No",
            close: "Close"
        },
        aftershow: $.noop(),
        afterhide: $.noop()
    },
    init: function(config) {
        this.config = $.extend(this.config, config);
    },
    alert: function(config) {
        var $alert = $(this._printModal("alert"));
        $alert.data("config", $.extend(this.config, config));
        
        $alert.append("<h2>" + config.title + "</h2>");
        $alert.append(this._printButton("ok", config));
        
        this.show($alert);
    },
    confirm: function(config) {
        var $confirm = $(this._printModal("confirm"));
        $confirm.data("config", $.extend(this.config, config));
        
        $confirm.append("<h2>" + config.title + "</h2>");
        $confirm.append(this._printButton("ok", config));
        $confirm.append(this._printButton("cancel", config));
        
        this.show($confirm);
    },
    show: function ($modal) {
        var self = this;
        var $overlay = $(this._printOverlay());
        
        $("body").append($overlay);
        
        $overlay.append($modal);
        
        this._handleBinds($modal);
        
        $modal.hide().slideDown("slow", function() {
            $modal.data("config").aftershow();
        });
    },
    _handleBinds: function($modal) {
        var self = this;
        
        $("button", $modal).click(function() {
            self.hide($modal);
        });
        
        $modal.on("remove", function() {
            $modal.data("config").afterhide();
        });
    },
    hide: function($modal) {
        var self = this;
        $modal.parent().fadeOut("slow").find($modal).slideUp("slow", function() {
            $modal.trigger("remove");
            $modal.remove();
            
       ...