JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="_800_alertYN">
  <div class="box">
    <h2>Do you want to save changes?</h2>
    <p></p>
    <div class="options">
      <button class="y boringBtn">Yes</button>
      <button class="n boringBtn">No</button>
    </div>
  </div>
</div>

CSS

._800_alertYN {
  position: fixed;
  bottom: 0; top: 0;
  left: 0; right: 0;
  background: rgba(0, 0, 0, 0.3);

}

._800_alertYN .box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px; margin-left: -175px;
  height: 190px; margin-top: -85px;
  background: lightgrey;
  padding: 10px 20px;
  box-shadow: 0 0 23px -2px rgba(0,0,0,0.5);
  border-radius: 3px;
  box-sizing: border-box;
}

._800_alertYN .options {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

JavaScript

var myConfirm = function (func1, func2) {
      $('.y').on('click', func1);
      $('.n').on('click', func2);
    },

    func1 = function () {
      alert('YES!');
    },
      
    func2 = function () {
      alert('NO!');
    };

myConfirm(func1, func2);