Draggable Bottom Sheet
A bottom sheet that slides up over a dimmed screen with a drag handle. Drag it down to dismiss or let it spring back.
Preview and code
index.html
<div class="bsw"><button class="op">Open bottom sheet</button><div class="ov"></div><div class="sh"><div class="hd"><i></i></div><h5>Share this file</h5><p>Anyone with the link can view.</p><div class="gr"><span><svg viewBox="0 0 24 24"><rect x="8" y="8" width="11" height="11" rx="2"/><path d="M5 15V6a1 1 0 011-1h9"/></svg>Copy link</span><span><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>Email</span><span><svg viewBox="0 0 24 24"><path d="M4 5h16v11H9l-5 4z"/></svg>Message</span><span><svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="18" cy="12" r="1.5"/></svg>More</span></div><button class="cn">Cancel</button></div></div>
styles.css
.bsw{position:relative;width:340px;height:330px;overflow:hidden;border-radius:18px;font-family:system-ui,-apple-system,sans-serif;color:#f1f1f1}.op{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 20px;border-radius:999px;border:1px solid #2a2a2a;background:#1b1b1b;color:#f1f1f1;font:600 13px/1 inherit;cursor:pointer}.ov{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s}.bsw.open .ov{opacity:1;pointer-events:auto}.sh{position:absolute;left:0;right:0;bottom:0;padding:0 18px 18px;border-radius:22px 22px 0 0;background:#1c1c1c;border-top:1px solid #2c2c2c;transform:translateY(105%);transition:transform .5s cubic-bezier(.3,1.15,.4,1);touch-action:none}.bsw.open .sh{transform:none}.sh.drag{transition:none}.hd{display:grid;place-items:center;padding:10px 0 12px;cursor:grab}.hd i{width:38px;height:4px;border-radius:2px;background:#444}.sh h5{margin:0 0 4px;font-size:15px}.sh p{margin:0 0 14px;font-size:12px;color:#8a8a8a}.gr{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.gr span{display:grid;justify-items:center;gap:7px;padding:12px 4px;border-radius:12px;background:#242424;font-size:11px;color:#cfcfcf;cursor:pointer;transition:background .2s,transform .2s}.gr span:hover{background:#2c2c2c;transform:translateY(-2px)}.gr svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.cn{width:100%;margin-top:12px;padding:12px;border:0;border-radius:12px;background:#2a2a2a;color:#fff;font:600 13px/1 inherit;cursor:pointer}
script.js
(function(){var r=document.querySelector('.bsw'),s=r.querySelector('.sh'),y0=0,dy=0,d=false;function c(){r.classList.remove('open');s.style.transform=''}r.querySelector('.op').onclick=function(){r.classList.add('open')};r.querySelector('.ov').onclick=c;r.querySelector('.cn').onclick=c;document.addEventListener('keydown',function(e){if(e.key==='Escape')c()});s.onpointerdown=function(e){if(e.target.closest('.gr,.cn'))return;d=true;y0=e.clientY;dy=0;s.classList.add('drag');s.setPointerCapture(e.pointerId)};s.onpointermove=function(e){if(!d)return;dy=Math.max(0,e.clientY-y0);s.style.transform='translateY('+dy+'px)'};s.onpointerup=function(){if(!d)return;d=false;s.classList.remove('drag');if(dy>70){c()}else{s.style.transform=''}}})();