JSFiddle - React, Tailwind, and code Playground

by Rene Rubio

HTML

<a href="" class="alert">alert</a>

<br>
<a href="" class="confirm">confirm</a>

<br>
<a href="" class="promptdefault">prompt-default</a>

<br>
<a href="" class="prompt">prompt</a>

<br>
<a href="" class="promptdefault1">Prompt with return false callback</a>

<br>
<input type="button" value="alert">
<input type="button" value="info">
<input type="button" value="warning">
<input type="button" value="error">
<input type="button" value="success">
<input type="button" value="delete">
<input type="button" value="cancel">

CSS

:invalid {
    box-shadow: none;
}
:-moz-submit-invalid {
    box-shadow: none;
}
:-moz-ui-invalid {
    box-shadow:none;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
    }
}
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}
.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}
._alert-wrapper {
    font-family: arial;
    font-size: 12px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index:9999999;
    position: fixed;
    overflow:auto;
	background:	url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDwAWKyAeOoAQyjYcAwGgbAfDAM0gEAVI4E0SXPaX0AAAAASUVORK5CYII=);
	background:	rgba(0, 0, 0, 0.3);
}
._msgbox {
    background:#fff;
    border:1px solid #ccc;
    border-radius:5px;
    box-shadow:rgba(0, 0, 0, 0.2) 0 0 15px;
    position:absolute;
    padding-bottom:45px;
    margin:auto;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
}
._msgbox-body {
    overflow:auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 45px;
    right: 0;
}
._msgbox-body, ._msgbox-footer {
    padding: 10px;
}
._msgbox-header {
    background: #eee;
    border-bottom: 1px solid #ccc;
    color: #666;
    font-weight: bold;
    padding: 10px;
    font-size:14px;
    margin:-10px -10px 10px -10px
}
._msgbox-body form, ._msgbox-body p {
    margin:0;
}
._msgbox-body .ico {
    background-image:...

JavaScript

(function ($, window, undefined) {
    'use strict';
    $.msgBox = function (msg, options) {
        var _options = options || {},
        _type = _options.type || 'info',
            _icon = _options.icon || '',
            _title = _options.title || '',
            _width = _options.width || 400,
            _height = _options.height || 100,

            _template = ['<div class="_alert-wrapper">',
                '<div class="_msgbox">',
                '<div class="_msgbox-body"><div class="_msgbox-header">' + _title + '</div></div>',
                '<div class="_msgbox-footer"></div>',
                '</div>',
                '</div>'].join(''),

            _msgbox = $(_template),
            _alert = _msgbox.find('._msgbox'),
            _body = _msgbox.find('._msgbox-body'),
            _header = _msgbox.find('._msgbox-header'),
            _footer = _msgbox.find('._msgbox-footer'),
            _form = [],

            _getButtons = function () {
                var buttons = _options.buttons || ['Ok'];
                return buttons;
            },
            _getMsgTemplate = function () {
                if (options.template) return options.template;

                var icon = (_icon === '') ? '' : '<span class="ico ' + _icon + '"></span>';
                var _msg_template = '<p class="' + _type + '">' + icon + '<span>' + msg + '</span></p>';

                return $(_msg_template);
            },
            _generateButtons = function () {
                var buttons = _getButtons(),
                    btnArr = [];

                $.each(buttons, function (i, b) {
                    _footer.append('<input type="button" value="' + b + '" />');
                });
                return btnArr;
            };

        _body.append(_getMsgTemplate());
        _form = _body.find('form');
        if ($.trim(_title) === '') {
            _header.hide();
        }
        _msgbox.appendTo('body');
        _generateButtons();
       ...