モーダルウィンドウ CSSのみ
<!--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">✖</label>
<h2>モーダルのタイトル</h2>
<p>テキストテキストテキストテキストテキスト</p>
</div>
</div>
</div>