JSFiddle - React, Tailwind, and code Playground

by rsrsrs

HTML

<div id="dialogoverlay"></div>
<div id="dialogbox">
  <div>
    <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
    <div id="dialogboxfoot"></div>
  </div>
</div>

<button onclick="alert("CLICK / TOUCH THE LEFT / RIGHT ARROWS ON YOUR KEYBOARD OR THE EDGES OF THE PAGES TO FLIP THE PAGES")"></button>


<script>Alert.render("CLICK / TOUCH THE LEFT / RIGHT ARROWS ON YOUR KEYBOARD OR THE EDGES OF THE PAGES TO FLIP THE PAGES");</script>

CSS

#dialogoverlay {
  display: none;
  opacity: .8;
  position: fixed;
  top: 0;
  left: 0;
  background: #FFF;
  width: 100%;
  z-index: 10;
}

#dialogbox {
  display: none;
  position: fixed;
  background: #000;
  border-radius: 7px;
  width: 550px;
  z-index: 10;
}

#dialogbox > div { background: #FFF; margin: 8px;}
#dialogbox > div #dialogboxhead { background: #666; font-size: 19px; padding: 10px; color: #ccc;}
#dialogbox > div #dialogboxbody { background: #333; padding: 20px; color: #FFF;}
#dialogbox > div #dialogboxfoot { background: #666; padding: 10px; text-align: right;}

JavaScript

function CustomAlert() {
	this.render = function() {
  	var winW = window.innerWidth;
    var winH = window.innerHeight;
    var dialogoverlay = document.getElementById("dialogoverlay");
    var dialogbox = document.getElementById("dialogbox");
    dialogoverlay.style.display = "block";
    dialogoverlay.style.height = winH+"px";
    dialogbox.style.left = (winW/2) - (550 * .5)+"px";
    dialogbox.style.top = "100px";
    dialogbox.style.display = "block";
    document.getElementById("dialogboxhead").innerHTML = "Acknowledge this message ";
    document.getElementById("dialogboxbody").innerHTML = dialog;
    document.getElementById("dialogboxfoot").innerHTML = "<button onclick="Alert.ok()">OK</button>";
  }
	this.ok = function() {
  
  }

}

var Alert = new CustomAlert();