JSFiddle - React, Tailwind, and code Playground

by Mao Sallam

HTML

<button class="btn" onclick="openModal()">Click Me</button>

CSS

body {
  font-family: sans-serif;
}

.jBox-Modal.myCustomTitle .jBox-title {
  background: #369;
  border-bottom: 1px solid #258;
  color: #fff;
  padding-top: 25px;
  padding-bottom: 25px;
  font-size: 22px;
  font-weight: 300;
}

.jBox-Modal.myCustomTitle .jBox-closeButton path {
    fill: #fff;
}

.jBox-Modal.myCustomTitle .jBox-closeButton:hover path {
    fill: #ddd;
}

TypeScript

var myCurrentModal = null;
var i = 1;

function openModal(id) {

	myCurrentModal = new jBox('Modal', {
  	addClass: 'second-modal',
    position: {
    	x: i * 20,
    	y: i * 20
    },
    title: 'Modal ' + i,
    content: '<button onclick="openModal()">Click me</button>',
    onOpen: function () {
      myCurrentModal && myCurrentModal.close();
      myCurrentModal = this;
    }
  }).open();

  i++;
}