Modal

1
Button modal: "my_modal_3" do
2
  "open modal"
3
end
4
5
Modal :tap_outside_to_close, id: "my_modal_3" do |modal|
6
  modal.body do
7
    h3 class: "text-lg font-bold" do
8
      "Hello!"
9
    end
10
11
    p class: "py-4" do
12
      "Press ESC key, click outside or click the button below to close"
13
    end
14
15
    modal.action do |action|
16
      action.close_button :primary do
17
        "Close"
18
      end
19
    end
20
  end
21
end

1
Button modal: "my_modal_1" do
2
  "open modal"
3
end
4
5
Modal id: "my_modal_1" do |modal|
6
  modal.body do
7
    h3 class: "text-lg font-bold" do
8
      "Hello!"
9
    end
10
11
    p class: "py-4" do
12
      "Press ESC key or click the button below to close"
13
    end
14
15
    modal.action do |action|
16
      action.close_button :primary do
17
        "Close"
18
      end
19
    end
20
  end
21
end

1
Button modal: "my_modal_2" do
2
  "open modal"
3
end
4
5
Modal :tap_outside_to_close, id: "my_modal_2" do |modal|
6
  modal.body do
7
    h3 class: "text-lg font-bold" do
8
      "Hello!"
9
    end
10
11
    p class: "py-4" do
12
      "Press ESC key or click outside to close"
13
    end
14
  end
15
end

1
Button modal: "my_modal_4" do
2
  "open modal"
3
end
4
5
Modal id: "my_modal_4" do |modal|
6
  modal.body do
7
    modal.close_button :sm, :circle, :ghost, class: "absolute right-2 top-2" do
8
      "✕"
9
    end
10
11
    h3 class: "text-lg font-bold" do
12
      "Hello!"
13
    end
14
15
    p class: "py-4" do
16
      "Press ESC key or click the button above to close"
17
    end
18
  end
19
end

1
Button modal: "my_modal_5" do
2
  "open modal"
3
end
4
5
Modal :tap_outside_to_close, id: "my_modal_5" do |modal|
6
  modal.body class: "w-11/12 max-w-5xl" do
7
    h3 class: "text-lg font-bold" do
8
      "Hello!"
9
    end
10
11
    p class: "py-4" do
12
      "Press ESC key, click outside or click the button below to close"
13
    end
14
15
    modal.action do |action|
16
      action.close_button :primary do
17
        "Close"
18
      end
19
    end
20
  end
21
end

1
Button modal: "my_modal_6" do
2
  "open modal"
3
end
4
5
Modal :tap_outside_to_close, :bottom, responsive: {sm: :middle}, id: "my_modal_6" do |modal|
6
  modal.body do
7
    h3 class: "text-lg font-bold" do
8
      "Hello!"
9
    end
10
11
    p class: "py-4" do
12
      "Press ESC key, click outside or click the button below to close"
13
    end
14
15
    modal.action do |action|
16
      action.close_button :primary do
17
        "Close"
18
      end
19
    end
20
  end
21
end