JSFiddle - React, Tailwind, and code Playground

by Farzad Cyrus

HTML

<a href="#" data-type="modal" data-target="#my-modal" data-title="The modal title"><strong>Click Me</strong></a> to open up the modal.

<div class="modal" id="my-modal">

	<div class="modal-container">
    <div class="modal-notification">
      This is a dedicated notification container for our modal.
    </div>
		<p>
		Click on the confirm button to fire the <strong>Modal.onConfirm()</strong> method, and cancel button to fire <strong>Modal.onCancel()</strong> method.
		</p>
    <div class="form">
      <input type="text" id="input-1" placeholder="Your Name...">
    </div>
    <div class="button-group">
      <button class="confirm">Add User</button>
		  <button class="cancel">Cancel</button>
    </div>
	</div>

</div>

CSS

body {
	position: relative;
	padding: 20px;
	background: #eeeeee;
	font-family: Myriad Pro, Arial, Tahoma;
	font-size: 14px;
	line-height: 24px;
}

* {
	box-sizing: border-box;
}

p {
	margin-bottom: 16px;
}

a,
a strong {
	color: #666699;
}

strong {
	color: #cc2244;
}

.form {
  display: block;
  clear: both;
  
}
input {
  border: 1px solid #dddddd;
  width: auto;
  min-width: 160px;
  padding: 8px;
  margin: 0 0 16px;
}
input:outline {
}
input[type="text"] {
  
}
.button-group {
  margin-left: -4px;
  margin-right: -4px;
}
button {
	width: auto;
	border: 1px solid #444466;
	background: #555577;
	color: #ffffff;
	padding: 4px 8px;
	line-height: 24px;
	cursor: pointer;
	margin: 0 4px 8px;
}


.modal-container {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 480px;
	height: auto;
	margin: -120px 0 0 -240px;
	background: #ffffff;
	padding: 24px;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
	z-index: 999999;
}
.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	width: 100%;
	height: 100%;
	content: "";
	display: none;
	z-index: 9999;
}

.modal-notification {
  background: #eef2f6;
  border: 1px solid #dde2e6;
  padding: 8px;
  color: #222266;
  display: none;
  margin-bottom: 16px;
}

JavaScript

"use strict";

function Modal (options) {
	"use strict";
	
  var noop = function(){
  	this.notification("This method is served by the modal.")
  };
  
	this.options = {
  	onConfirm : noop,
    onCancel : noop
  };
  
  this.options = $.extend(this.options, options);
	
	this.$trigger = $('[data-type="modal"][data-target]');
  
	this.modalSelector = this.$trigger.data('target');
	
  this.$modal = $(this.modalSelector);
  this.$modalContainer = this.$modal.find('.modal-container');
  this.$modalNotification = this.$modal.find('.modal-notification');
  this.modalNotificationActive = false;
	this.modalTitle = this.$trigger.data('title');
	this.modalActive = false;
	this.$cancelButton = $(this.modalSelector).find(".cancel");
  this.$confirmButton = $(this.modalSelector).find(".confirm");
  
	//console.log(this.$modal, this.modalTitle, this.modalSelector)
	
  // If no notification container found, then add one and re-register it
  if (!this.$modalNotification.length) {
  	this.$modalContainer.prepend('<div class="modal-notification"></div>');
     this.$modalNotification = this.$modal.find('.modal-notification');
  }
  
  var self = this;
  // DISPLAY MODAL
	this.$trigger.click(function () {
		console.log('The modal should be displayed.');
		self.show();
	});
	
  this.$confirmButton.click(function(){
  	//if(if this form is valid)
    self.options.onConfirm();
  })
  
  this.$cancelButton.click(function(){
  	self.options.onCancel();
  })
};

Modal.prototype.notification = function (message) {
	var self = this;
	return self.showNotification(message);
};

Modal.prototype.showNotification = function(message) {
	var self = this;
  if (self.modalNotificationActive == false) {
  	self.$modalNotification.html(message);
  	self.$modalNotification.fadeIn();
    self.modalNotificationActive = true;
  }
};
Modal.prototype.hideNotification = function() {
	var self = this;
  if (self.modalNotificationActive == true) {
  	self.$modalNotification.fadeOut();
   ...