Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
<dialog class="dialog" data-controller="turbo-confirm" data-action="close->turbo-confirm#submit" role="alertdialog" aria-labelledby="turbo_confirm_title" aria-describedby="turbo_confirm_text">
  <form method="dialog" class="dialog__content">
    <h2 class="text-lg font-semibold leading-none" id="turbo_confirm_title" data-turbo-confirm-target="title"></h2>
    <p class="text-sm text-subtle mbs-2" id="turbo_confirm_text" data-turbo-confirm-target="text"></p>
    <div class="flex items-center justify-end gap mbs-4">
      <button value="cancel" class="btn">Cancel</button>
      <button value="confirm" class="btn btn--primary">Continue</button>
    </div>
  </form>
</dialog>
<a class="btn" data-turbo-method="delete" data-turbo-confirm="Are you absolutely sure?" href="">Click to destroy</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
<dialog class="dialog" data-controller="turbo-confirm" data-action="close->turbo-confirm#submit" role="alertdialog" aria-labelledby="turbo_confirm_title" aria-describedby="turbo_confirm_text">
  <form method="dialog" class="dialog__content">
    <h2 class="text-lg font-semibold leading-none" id="turbo_confirm_title" data-turbo-confirm-target="title"></h2>
    <p class="text-sm text-subtle mbs-2" id="turbo_confirm_text" data-turbo-confirm-target="text"></p>
    <div class="flex items-center justify-end gap mbs-4">
      <button value="cancel" class="btn">Cancel</button>
      <button value="confirm" class="btn btn--primary">Continue</button>
    </div>
  </form>
</dialog>
<%= link_to "Click to destroy", "", class: "btn", data: { turbo_method: :delete, turbo_confirm: "Are you absolutely sure?" } %>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
.dialog {
  background-color: var(--color-bg);
  border-radius: var(--rounded-lg);
  border-width: var(--border);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  inline-size: var(--size-full);
  margin: auto;
  max-inline-size: var(--dialog-size, var(--max-i-lg));
  &::backdrop {
    background-color: rgba(0, 0, 0, .8);
  }
  /* Final state of exit animation and setup */
  opacity: 0;
  transform: var(--scale-95);
  transition-behavior: allow-discrete;
  transition-duration: var(--time-200);
  transition-property: display, overlay, opacity, transform;
  &::backdrop {
    opacity: 0;
    transition-behavior: allow-discrete;
    transition-duration: var(--time-200);
    transition-property: display, overlay, opacity;
  }
  /* Final state of entry animation */
  &[open] { opacity: 1; transform: var(--scale-100); }
  &[open]::backdrop { opacity: 1; }
  /* Initial state of entry animation */
  @starting-style {
    &[open] { opacity: 0; transform: var(--scale-95); }
    &[open]::backdrop { opacity: 0; }
  }
  /* Drawer component on mobile  */
  @media (width < 40rem) {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    margin-block-end: 0;
    max-inline-size: none;
  }
}
.dialog__content {
  padding: var(--size-6);
}
.dialog__close {
  inset-block-start: var(--size-3);
  inset-inline-end:  var(--size-3);
  position: absolute;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  static targets = [ "title", "text" ]
  static values  = { defaultConfirmText: { type: String, default: "This action cannot be undone and may have permanent consequences." } }
  #confirmCallback = null
  connect() {
    Turbo.config.forms.confirm = this.#confirm.bind(this)
  }
  disconnect() {
    Turbo.config.forms.confirm = null
  }
  submit({ target }) {
    this.#confirmCallback?.(target.returnValue === "confirm")
  }
  #confirm(message, target) {
    this.titleTarget.textContent = message
    this.textTarget.textContent  = target.dataset.turboConfirmText || this.defaultConfirmTextValue
    this.element.showModal()
    return new Promise(resolve => (this.#confirmCallback = resolve))
  }
}

You must have only one turbo confirm dialog per page.