Cacher is the code snippet organizer for pro developers

[data-modal] {}
[data-modal-content] {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, .25);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity .2s .1s, height 0s .3s;
}
[data-modal-content].is-open {
  opacity: 1;
  height: 100%;
  transition: opacity .2s, height 0s;
}
[data-modal-content]:before {
  position: relative;
}
[data-modal-content-inner] {
  opacity: 0;
  transition: opacity .2s;
}
[data-modal-content].is-open [data-modal-content-inner] {
  opacity: 1;
  transition: opacity .2s .1s;
}
[data-modal-close] {
  cursor: pointer;
}

var setModal = function () {
  $('[data-modal]').on('click', function (ev) {
    ev.preventDefault()
    var modalId = $(this).data('modal')
    $('[data-modal-content="' + modalId + '"]').addClass('is-open')
    $('body').addClass('u-overflow-hidden')
  })
  $('[data-modal-close]').on('click', function (ev) {
    ev.preventDefault()
    $('[data-modal-content]').removeClass('is-open')
    $('body').removeClass('u-overflow-hidden')
  })
}
setModal()