JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<button type="button" class="btn btn-warning" onclick="waitingDialog.show('Loading', {dialogSize: 'sm', progressType: 'warning'})">Show dialog</button>

<!--
<button type="button" class="btn btn-primary" onclick="waitingDialog.show();setTimeout(function () {waitingDialog.hide();}, 3000);">Show dialog</button>
-->

CSS

body{margin:30px;}
@media (min-width: 768px)
.modal-sm {
    width: 300px;
    bottom: 20px!important;
    right: 20px;
    position: absolute;
}
@media (min-width: 768px)
.modal-dialog {
    width: 300px;
    /* margin: 30px auto; */
    bottom: 20px!important;
    right: 20px;
}
.modal-dialog {
    position: absolute;
    margin: 10px;
        width: 300px;
     bottom: 20px!important;
    right: 20px;
    font-weight:700;
}
.modal-header {
    border: none;
    margin-bottom: -15px;
}
.progress-bar-warning {
    background-color: #c40030;
}

JavaScript

var waitingDialog = waitingDialog || (function ($) {
    'use strict';

	// Creating modal dialog's DOM
	var $dialog = $(
		'<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;">' +
		'<div class="modal-dialog modal-m">' +
		'<div class="modal-content">' +
			'<div class="modal-header"><div class="modalTitle" style="margin:0;"></div></div>' +
			'<div class="modal-body">' +
				'<div class="progress progress-striped active" style="margin-bottom:0;"><div class="progress-bar" style="width: 100%"></div></div>' +
			'</div>' +
		'</div></div></div>');

	return {
		/**
		 * Opens our dialog
		 * @param message Custom message
		 * @param options Custom options:
		 * 				  options.dialogSize - bootstrap postfix for dialog size, e.g. "sm", "m";
		 * 				  options.progressType - bootstrap postfix for progress bar type, e.g. "success", "warning".
		 */
		show: function (message, options) {
			// Assigning defaults
			if (typeof options === 'undefined') {
				options = {};
			}
			if (typeof message === 'undefined') {
				message = 'Loading';
			}
			var settings = $.extend({
				dialogSize: 'm',
				progressType: '',
				onHide: null // This callback runs after the dialog was hidden
			}, options);

			// Configuring dialog
			$dialog.find('.modal-dialog').attr('class', 'modal-dialog').addClass('modal-' + settings.dialogSize);
			$dialog.find('.progress-bar').attr('class', 'progress-bar');
			if (settings.progressType) {
				$dialog.find('.progress-bar').addClass('progress-bar-' + settings.progressType);
			}
			$dialog.find('.modalTitle').text(message);
			// Adding callbacks
			if (typeof settings.onHide === 'function') {
				$dialog.off('hidden.bs.modal').on('hidden.bs.modal', function (e) {
					settings.onHide.call($dialog);
				});
			}
			// Opening dialog
			$dialog.modal();
		},
		/**
		 * Closes dialog
		 */
		hide: function ()...