JSFiddle - React, Tailwind, and code Playground

by moob

JavaScript

/* STYLED ALERT 1.1.1
 * ==================
 * Replaces JavaScript's native alert() with a custom styled modal alert
 * Self-invoking anonymous function. Requires jQuery so doesn't initialise until dom ready
 * To Use: Just include this script on your page - it replaces the native alert so simply make a normal js alert. EG: alert("I am an alert");
 * Optional: You can use HTML in your message and set the button text if you wish eg: alert("<h1>Woah</h1><p>Keep it minimal - this is an alert after all!</p>","Alrighty!")
 *
 * CHANGELOG
 * 1.0.1 fixed bug where the modal button links were being followed
 * 1.0.2 added an optional callback to the custom alert plus focus on the first :invalid :input
 * 1.1.0 added Element.prototype.matches and improved validation for form within modal
 * 1.1.1 minor style amends
 * 1.2.0 WIP adding title bar and support for corp skin
 */

if (!Element.prototype.matches) {
    Element.prototype.matches =
        Element.prototype.matchesSelector ||
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector ||
        Element.prototype.oMatchesSelector ||
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;
        };
}

(function(){
    "use strict";
    //console.log("styledAlert.1.2.0");
    var customAlert = {
        //doc : window.top.document || window.document,
        doc : window.document,
        alertDialog : $("<div id='alertDialog' class='alertDialog'><div class='dialog-box'><div class='dialog-message'>message</div><div class='dialog-button-row'><a href='#'>Okay</a></div></div></div>"),
        confirmDialog : $("<div id='confirmDialog' class='alertDialog'><div class='dialog-box'><div class='dialog-message'>message</div><div class='dialog-button-row'><a...