モーダルウィンドウ

<button class="open-btn" type="button">モーダルを開く</button>
        <div class="overlay" aria-hidden="true">
          <div class="modal" role="dialog" aria-label="お知らせ">
            <button class="close-x" type="button" aria-label="閉じる">&times;</button>
            <h4>キャンペーンのお知らせ</h4>
            <p>ただいま新規登録で初月無料キャンペーンを実施中です。この機会にぜひお試しください。</p>
            <button class="ok-btn" type="button">詳しく見る</button>
          </div>
        </div>

.d11-01-03 .open-btn{padding:12px 28px;background:#5b6bff;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(91,107,255,.35);transition:transform .2s,box-shadow .2s}
        .d11-01-03 .open-btn:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(91,107,255,.45)}
        .d11-01-03 .overlay{position:absolute;inset:0;background:rgba(20,25,40,.55);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:5}
        .d11-01-03 .overlay.on{opacity:1;visibility:visible}
        .d11-01-03 .modal{position:relative;width:82%;max-width:300px;background:#fff;border-radius:12px;padding:24px 22px 20px;text-align:center;transform:scale(.85);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
        .d11-01-03 .overlay.on .modal{transform:scale(1)}
        .d11-01-03 .modal h4{margin:0 0 8px;font-size:14px;color:#2b3245}
        .d11-01-03 .modal p{margin:0 0 14px;font-size:11.5px;line-height:1.7;color:#5a6275}
        .d11-01-03 .close-x{position:absolute;top:8px;right:10px;background:none;border:none;font-size:20px;line-height:1;color:#9aa1b5;cursor:pointer;font-family:inherit}
        .d11-01-03 .close-x:hover{color:#2b3245}
        .d11-01-03 .ok-btn{padding:9px 22px;background:#5b6bff;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}

(function(){
        var root = document.querySelector('#item-11-01-03 .d11-01-03');
        var overlay = root.querySelector('.overlay');
        root.querySelector('.open-btn').addEventListener('click', function(){
          overlay.classList.add('on'); overlay.setAttribute('aria-hidden','false');
        });
        function close(){ overlay.classList.remove('on'); overlay.setAttribute('aria-hidden','true'); }
        root.querySelector('.close-x').addEventListener('click', close);
        overlay.addEventListener('click', function(e){ if(e.target === overlay){ close(); } });
      })();