Cacher is the code snippet organizer for pro developers

<!--modal_trigger-->
<label for="modal-trigger">OPEN</label>

<!--modal_trigger-->
上からアニメーション
<div class="modal-wrap from-top">

下からアニメーション
<div class="modal-wrap from-bottom">

左からアニメーション
<div class="modal-wrap from-left">

右からアニメーション
<div class="modal-wrap from-right">

モーダルを上下左右真ん中に表示
<div class="modal-wrap a-center">

モーダルのサイズを小さく
<div class="modal-wrap small">

モーダルのサイズを100%
<div class="modal-wrap full">

.modal .checkbox{display:none}.modal .modal-overlay{opacity:0;transition:all .3s ease;width:50%;position:absolute;width:100%;height:100%;position:fixed;top:0;left:0;z-index:-100;transform:scale(1);display:flex;background-color:rgba(0,0,0,.7)}.modal .modal-wrap{background-color:#ddd;box-shadow:3px 3px 3px rgba(0,0,0,.2);padding:40px 50px;width:60%;margin:20px auto;align-self:flex-start;border-radius:2px;transition:all .5s ease}.modal .modal-wrap.small{width:30%}.modal .modal-wrap.full{width:100%;height:100%}.modal .modal-wrap.a-center{align-self:center}.modal .modal-wrap.from-left{transform:translateX(-100%)}.modal .modal-wrap.from-right{transform:translateX(100%)}.modal .modal-wrap.from-top{transform:translateY(-100%)}.modal .modal-wrap.from-bottom{transform:translateY(100%)}.modal .modal-overlay .close{position:absolute;right:10px;top:10px;font-size:40px;width:30px;height:30px;color:#282c34}.modal .modal-overlay .close:hover{cursor:pointer;color:#4b5361}.modal .o-close{width:100%;height:100%;position:fixed;left:0;top:0;z-index:-100}.modal input:checked~.o-close{z-index:2}.modal input:checked~.modal-overlay{transform:scale(1);opacity:1;z-index:1;overflow:auto}.modal input:checked~.modal-overlay .modal-wrap{transform:translateY(0);z-index:3}@media (max-width:800px){.modal .modal-wrap{width:80%;padding:20px}}@media (max-width:500px){.modal .modal-wrap{width:90%}}

<!--modal-->
<div class="modal">
  <input id="modal-trigger" class="checkbox" type="checkbox">
  <div class="modal-overlay">
    <label for="modal-trigger" class="o-close"></label>
    <div class="modal-wrap">
      <label for="modal-trigger" class="close">&#10006;</label>
      <h2>モーダルのタイトル</h2>
      <p>テキストテキストテキストテキストテキスト</p>
    </div>
  </div>
</div>