Модальное окно на HTML5, CSS3 и скрытых чекбоксах

Создание всплывающего модального окна на скрытых чекбоксах

HTML

<html class = "html">
<div class = "open">
open
</div>
<div class = "modal">
  <div class = "lay">
    l
  </div>
  <div class = "wind">
    w<div class = "fff">
      x
    </div>
  </div>
</div>


</html>

CSS

.open{
  border: 1px solid green;
  cursor: pointer;
}

.modal {
  border: 1px solid purple;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal_active{
  display: block;
}
.lay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.wind{
  position: relative;
  z-index: 9999;
  width: 300px;
  height: 300px;
  border: 1px solid green;
  background-color: #fff;
  margin: 10% auto;
}

.fff{
  border: 1px solid green;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  cursor: pointer;
  
}

JavaScript

var btn = document.getElementsByClassName('open')[0];
var lay = document.getElementsByClassName('lay')[0];
var fff = document.getElementsByClassName('fff')[0];


btn.onclick = asdf;

lay.onclick = asdf2;
fff.onclick = asdf2;

function asdf2() {
	document.getElementsByClassName('modal')[0].classList.toggle('modal_active');
}

function asdf() {
	document.getElementsByClassName('modal')[0].classList.toggle('modal_active');
}