JSFiddle - React, Tailwind, and code Playground

by gentou

HTML

<div id="overlay" class="overlay">
  <button class="controller" id="controller">aaa</button>
  <h1></h1>
  <img src="" alt="">
</div>

<div class="cat" data-name="Meow1"></div>
<div class="cat" data-name="Meow2"></div>
<div class="cat" data-name="Meow3"></div>
<div class="cat" data-name="Meow4"></div>

CSS

.overlay{
  width: 100%;
  height: 100%;
  background-color: green;
  display: none;
  position: fixed;
  text-align: center;
}

.overlay button{
  display: block;
  margin: 0 auto;
}

.visible{
  display: block;
}

.cat{
  width: 100px;
  height: 100px;
  margin-right: 30px;
  float: left;
  background-image: url(http://i.imgur.com/CCVqBsMb.jpg);
}

JavaScript

var exampleFn = {
init: function(){
    var overlay = document.getElementById("overlay");
    var buttons = document.getElementsByClassName("cat");
    var controller = document.getElementById("controller");
    var overlay_image = overlay.getElementsByTagName("img");
    var overlay_header = overlay.getElementsByTagName("h1");
    this.bind_events(controller, overlay, buttons, overlay_image, overlay_header);
},

bind_events: function(controller, overlay, buttons, overlay_image, overlay_header){

		window.onhashchange = function(){
                console.log(window.location.hash);
    	if(location.hash === "" && overlay.classList.contains("visible")){
      	overlay.classList.toggle("visible");
        console.log("passed");
        history.replaceState(undefined, undefined, "#overlay")
      }
    }

    controller.addEventListener("click", function(){
    overlay.classList.toggle("visible");
    });

    for(var i = 0; i < buttons.length; i++){
        buttons[i].addEventListener("click", function(){
            overlay.classList.toggle("visible");
            window.location.hash = "overlay";
            image =  window.getComputedStyle(this, null).getPropertyValue("background-image").slice(5, -2);
            name = this.dataset.name;
            overlay_image[0].setAttribute("src", image);
            overlay_header[0].innerHTML = name;


        });
    }
  }
};

exampleFn.init();