Action Sheet — Free HTML CSS JS iOS Bottom Sheet Snippet

<div class="as-demo">
  <button type="button" class="as-open" id="asOpen">Show actions</button>

  <div class="as-root" id="asRoot" aria-hidden="true">
    <div class="as-backdrop" id="asBackdrop"></div>
    <div class="as-sheet" id="asSheet" role="dialog" aria-modal="true" aria-label="Actions">
      <div class="as-grab" aria-hidden="true"></div>
      <p class="as-title">Photo options</p>
      <div class="as-group">
        <button class="as-item">📷 Take photo</button>
        <button class="as-item">🖼 Choose from library</button>
        <button class="as-item">🔗 Copy link</button>
        <button class="as-item as-danger">🗑 Delete photo</button>
      </div>
      <button class="as-item as-cancel" id="asCancel">Cancel</button>
    </div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0c0c14;color:#fff;display:flex;justify-content:center;align-items:center;min-height:100vh}

.as-open{background:#6366f1;color:#fff;border:none;border-radius:12px;padding:13px 22px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}

.as-root{position:fixed;inset:0;z-index:50;visibility:hidden}
.as-root.open{visibility:visible}
.as-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s}
.as-root.open .as-backdrop{opacity:1}

.as-sheet{position:absolute;left:0;right:0;bottom:0;padding:8px 12px max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;transform:translateY(100%);transition:transform .34s cubic-bezier(.32,.72,0,1);touch-action:none}
.as-root.open .as-sheet{transform:translateY(0)}
.as-grab{width:38px;height:5px;border-radius:3px;background:#3a3a52;margin:2px auto 6px}
.as-title{text-align:center;font-size:12.5px;color:#8b8ba3;padding:4px 0 8px}

.as-group{background:#1b1b2b;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.as-item{background:none;border:none;border-bottom:1px solid #26263c;color:#e8e8f4;font-family:inherit;font-size:16px;font-weight:600;padding:16px;cursor:pointer;text-align:center;transition:background .15s}
.as-group .as-item:last-child{border-bottom:none}
.as-item:active{background:#26263c}
.as-danger{color:#fb7185}
.as-cancel{background:#1b1b2b;border-radius:16px;font-weight:800}

var root = document.getElementById('asRoot');
var sheet = document.getElementById('asSheet');
var lastFocus = null;

function open() {
  lastFocus = document.activeElement;
  root.classList.add('open'); root.setAttribute('aria-hidden', 'false');
}
function close() {
  root.classList.remove('open'); root.setAttribute('aria-hidden', 'true');
  sheet.style.transform = '';
  if (lastFocus) lastFocus.focus();
}

document.getElementById('asOpen').addEventListener('click', open);
document.getElementById('asCancel').addEventListener('click', close);
document.getElementById('asBackdrop').addEventListener('click', close);
document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && root.classList.contains('open')) close(); });

// Swipe-down to dismiss: drag the sheet, and if pulled far/fast enough, close.
var startY = 0, dy = 0, dragging = false, t0 = 0;
sheet.addEventListener('pointerdown', function (e) {
  dragging = true; startY = e.clientY; dy = 0; t0 = Date.now();
  sheet.style.transition = 'none';
  sheet.setPointerCapture(e.pointerId);
});
sheet.addEventListener('pointermove', function (e) {
  if (!dragging) return;
  dy = Math.max(0, e.clientY - startY);     // only allow downward drag
  sheet.style.transform = 'translateY(' + dy + 'px)';
});
sheet.addEventListener('pointerup', function () {
  if (!dragging) return;
  dragging = false;
  sheet.style.transition = '';
  var fast = dy / (Date.now() - t0) > 0.5;
  if (dy > 110 || fast) close();
  else sheet.style.transform = 'translateY(0)';
});