Modal die opploft

A dialog appears with a short springy scale and a fading backdrop; closes with Esc, the close button or a click outside. For confirmations.

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →