JSFiddle - React, Tailwind, and code Playground

by notadam

HTML

<a href="#">Do something destructive</a>

CSS

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 9;
}

.box {
  display: none;
  //min-width: 200px;
  background: white;
  height: auto;
  padding: 3em;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 40%;
}

JavaScript

var Modal = (function() {
	var Modal = {}

  var $box = $('<div class="box"></div>').appendTo('body')
  var $overlay = $('<div class="overlay"></div>').appendTo('body')
  
	Modal.show = function(message, confirmed, cancelled) {
  	cancelled = cancelled || Modal.hide
    
  	$confirmButton = $('<button>OK</button>')
    $cancelButton = $('<button>Cancel</button>')
    
    $confirmButton.on('click', confirmed)
    $cancelButton.on('click', cancelled)

    $box.html('')
    $('<p>' + message + '</p>').appendTo($box)
    $confirmButton.appendTo($box)
    $cancelButton.appendTo($box)

    $box.show()
    $overlay.show()
  }
  
  Modal.hide = function() {
  	$overlay.hide()
    $box.hide()
  }
  
  return Modal
}())

$(document).on('click', 'a', function() {
	Modal.show('Are you sure?', function() {
		console.log('Woohoo, lets go!')
    Modal.hide()
  })
})