CSSScript.com Demo Page

Apertura: Button-to-Dialog Morphing Modal Library Demos

Watch a button become a dialog, then find its way back. Try different shapes, tune the spring, and explore every interaction below.

Live playgroundClick / adjust / repeat

Open. Explore. Close it to watch the return.

Find your feel

Stiffness 144 Damping 14 Launch velocity2400

Placement Dialog size

Motion: OriginalLess damping, more bounce. Zero velocity, a straighter path.

Start with a click

The essentials

Every button opens a real example. Close a dialog to see its result below.

One motion. Many shapes.

Launch from a pill, a square, or a raised surface. Compare them with a dialog that fades into the center.

View example code

modal.open({
  origin: event.currentTarget,
  title: 'From a button to a dialog',
  confirmLabel: 'Close',
  cancelLabel: null
})

Decisions & dismissal

Confirm an action, require a choice, or disable dragging. Try Escape and the backdrop to compare behavior.

Choose an action to see its result.

A space for your input

Name a playlist with a custom form, try a simple prompt, or change settings inside a custom content panel.

No playlist named yet.

View example code

modal.open({
  origin: button,
  ariaLabel: 'Name a playlist',
  render(body, { close }) {
    const label = document.createElement('label')
    label.textContent = 'Playlist name'
    const input = document.createElement('input')
    const save = document.createElement('button')
    save.textContent = 'Save'
    save.onclick = () => close(input.value.trim())
    label.append(input)
    body.append(label, save)
  }
})

A message, a different mood

Try a simple alert, a success message, and a warning. Each has its own action and returns a result.

View example code

await modal.alert({
  origin: button,
  title: 'Preview complete',
  description: 'Everything is ready to review.'
})

Go a little further

More ways to open up

Stack dialogs, change their destination, and update content while they are open.

Change the pace & scale

Compare three motion presets and three sizes. These examples use fixed settings for a repeatable comparison.

Another layer to the story

Open an account panel, then a confirmation above it. Close the top layer to return, or dismiss the entire stack.

View example code

const opener = document.querySelector('#reference-origin')
modal.open({ origin: opener, title: 'A saved reference' })

// Dismiss every layer from an action inside the dialog.
modal.closeAll()

Meet me over here

Open a menu beside its button, pull up a bottom sheet, or expand a collection in place.

The next move

Watch a dialog resize, block its first close attempt, or send it to a different destination.

Inbox 0

View example code

const handle = modal.open({ origin: button, title: 'A note' })
modal.update(handle.id, { description: 'A longer note.' })

modal.open({
  origin: button,
  closeOrigin: document.querySelector('[data-inbox]'),
  title: 'Send to inbox?'
})

Interaction log

Your results will appear here. Pick any example to begin.