<div id="wrapper">
  <div id="modal">
    <a id="btn" href="#"><i class="fa fa-times"></i></a>
    <span>ようこそ</span>
  </div>
</div>
#modal {
  display: none;
  background: #EE6557;
  border-radius: 10px;
  min-height: 200px;
  min-width: 300px;
  line-height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  z-index: 10;
}

a {
  background: #333;
  border-radius: 50%;
  display: block;
  height: 44px;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 44px;
  z-index: 20;
}

i {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

span {
  color: #fff;
}

.overlay {
  background: rgba(0, 0, 0, .5);
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
(function() {
  var modal = document.getElementById('modal');
  var overlay = document.createElement('div');
  var wrapper = document.getElementById('wrapper');
  document.body.insertBefore(overlay, wrapper);
  overlay.classList.add('overlay');
  modal.style.display = 'block';
  overlay.style.display = 'block';
  var btn = document.getElementById('btn');
  btn.onclick = function() {
    btn.style.display = 'none';
    modal.style.display = 'none';
    overlay.style.display = 'none';
  }
  overlay.onclick = function() {
    btn.style.display = 'none';
    modal.style.display = 'none';
    overlay.style.display = 'none';
  }
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.