ZGXBgV

index.html

<div id=popup class="hidden">This is a popup message goes away after <span id=timeouttime></span> seconds.</div>
<pre id=info>pre</pre>
<button onclick='onButtonClick()'>onButtonClick</button>

script.js

var gWaittime = 1000;
var gTimeouttime = 5000;
	document.getElementById('timeouttime').innerHTML = gTimeouttime / 1000; //
	function onButtonClick() {
	  //alert("button clicked.");
	  console.log('button clicked');
	  console.log('popup');
	  /* This could be done with callbacks, but I did it this way so it was obvious. */
	  /* Set Popup message after a short delay */
	  setTimeout(function() {
	    document.getElementById('popup').classList.add("popUp");
	  }, gWaittime);
	  /* Set delay to fadeOut */
	  setTimeout(function() {
	    console.log('fadeOut');
	    document.getElementById('popup').classList.add("fadeOut");
	  }, gWaittime + gTimeouttime);
	  /* Reset to Inital state. */
	  setTimeout(function() {
	    console.log('remove popUp');
	    document.getElementById('popup').classList.remove("popUp");
	    document.getElementById('popup').classList.remove("fadeOut");
	    document.getElementById('popup').classList.add("hidden");
	  }, gWaittime + gWaittime + gTimeouttime);
	}

style.css

.hidden {
  visibility: hidden;
  display: none;
}

.popUp {
  visibility: visible;
  display: block;
  opacity: 1;
  transition: opacity 1.5s ease-in-out;
}

.fadeOut {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

#popup {
  height: 200px;
  width: 300px;
  background-color: #eeeeee;
  padding: 0.5em;
  border: 1px black solid;
  border-radius: 0.5em;
  position: absolute;
  left: 50px;
  top: 50px;
}

ZGXBgV.markdown

ZGXBgV

A Pen by Jesse Monroy on CodePen.

License.