Modal die opploft

<!-- Modal die opploft · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-mdp"><button class="ei-mdp__open" type="button">Afspraak verzetten</button><div class="ei-mdp__bd" hidden><div class="ei-mdp__d" role="dialog" aria-modal="true" aria-labelledby="ei-mdp-t"><button class="ei-mdp__x" type="button" aria-label="Sluiten">&times;</button><span class="ei-mdp__k">Tandartspraktijk Zuid</span><h4 class="ei-mdp__h" id="ei-mdp-t">Afspraak verzetten?</h4><p class="ei-mdp__p">Je huidige afspraak op dinsdag 14 oktober om 10:30 vervalt.</p><div class="ei-mdp__a"><button class="ei-mdp__btn ei-mdp__btn--ghost" type="button" data-close>Annuleren</button><button class="ei-mdp__btn" type="button" data-close>Ja, verzetten</button></div></div></div></div>
</div>

/* Modal die opploft · NedDev · eigen werk. */
.ei-mdp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ei-mdp__open{font-family:'Switzer',sans-serif;font-weight:600;font-size:15px;padding:14px 24px;border:0;border-radius:2px;background:#0a0a0a;color:#fff;cursor:pointer;transition:background .2s}
.ei-mdp__open:hover{background:#F5480F}
.ei-mdp__bd{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,10,10,.5);opacity:0;transition:opacity .25s;z-index:5}
.ei-mdp__bd[hidden]{display:none}
.ei-mdp__bd.is-open{opacity:1}
.ei-mdp__d{position:relative;width:82%;max-width:300px;box-sizing:border-box;background:#fff;border-radius:6px;padding:18px 18px 16px;transform:scale(.86) translateY(8px);opacity:0;transition:transform .45s cubic-bezier(.2,1.5,.4,1),opacity .2s}
.ei-mdp__bd.is-open .ei-mdp__d{transform:none;opacity:1}
.ei-mdp__x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:#0a0a0a;border-radius:2px}
.ei-mdp__x:hover{background:#f4f3f1}
.ei-mdp__k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#F5480F}
.ei-mdp__h{margin:6px 0 4px;font-family:'Switzer',sans-serif;font-weight:700;font-size:18px;color:#0a0a0a}
.ei-mdp__p{margin:0 0 14px;font-family:'Switzer',sans-serif;font-size:13px;line-height:1.45;color:rgba(10,10,10,.7)}
.ei-mdp__a{display:flex;gap:8px;justify-content:flex-end}
.ei-mdp__btn{font-family:'Switzer',sans-serif;font-weight:600;font-size:13px;padding:9px 14px;border:0;border-radius:2px;background:#F5480F;color:#fff;cursor:pointer}
.ei-mdp__btn--ghost{background:#f4f3f1;color:#0a0a0a}
@media(prefers-reduced-motion:reduce){.ei-mdp__bd,.ei-mdp__d{transition:none}}

// Modal die opploft · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-mdp'),open=w.querySelector('.ei-mdp__open'),bd=w.querySelector('.ei-mdp__bd'),d=w.querySelector('.ei-mdp__d');
function show(){bd.hidden=false;void bd.offsetWidth;bd.classList.add('is-open');setTimeout(function(){w.querySelector('.ei-mdp__x').focus();},50);}
function hide(){bd.classList.remove('is-open');setTimeout(function(){bd.hidden=true;open.focus();},260);}
open.addEventListener('click',show);
bd.addEventListener('click',function(e){if(e.target===bd||e.target.closest('[data-close]')||e.target.closest('.ei-mdp__x'))hide();});
w.addEventListener('keydown',function(e){if(e.key==='Escape'&&!bd.hidden)hide();});
}
init(document.querySelector('.jouw-container'));