JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<div id="progressModal" class="modal" role="dialog" tabindex="-1" style="display:none">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <span class="sr-only">45% Complete</span>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<button>

JavaScript

(function ($) {
    var current = null;
    $.modal = function (el, options) {
        $.modal.close(); // Close any open modals.
        var remove, target;
        this.$body = $('body');
        this.options = $.extend({}, $.modal.defaults, options);
        this.options.doFade = !isNaN(parseInt(this.options.fadeDuration, 10));
        if (el.is('a')) {
            target = el.attr('href');
            //Select element by id from href
            if (/^#/.test(target)) {
                this.$elm = $(target);
                if (this.$elm.length !== 1) return null;
                this.open();
                //AJAX
            } else {
                this.$elm = $('<div>');
                this.$body.append(this.$elm);
                remove = function (event, modal) {
                    modal.elm.remove();
                };
                this.showSpinner();
                el.trigger($.modal.AJAX_SEND);
                $.get(target).done(function (html) {
                    if (!current) return;
                    el.trigger($.modal.AJAX_SUCCESS);
                    current.$elm.empty().append(html).on($.modal.CLOSE, remove);
                    current.hideSpinner();
                    current.open();
                    el.trigger($.modal.AJAX_COMPLETE);
                }).fail(function () {
                    el.trigger($.modal.AJAX_FAIL);
                    current.hideSpinner();
                    el.trigger($.modal.AJAX_COMPLETE);
                });
            }
        } else {
            this.$elm = el;
            this.open();
        }
    };
    $.modal.prototype = {
        constructor: $.modal,
        open: function () {
            var m = this;
            if (this.options.doFade) {
                this.block();
                setTimeout(function () {
                    m.show();
                }, this.options.fadeDuration * this.options.fadeDelay);
            } else {
                this.block();
               ...