Modal
Modifier | DaisyUI class |
---|---|
:open | modal-open |
:top | modal-top |
:bottom | modal-bottom |
:middle | modal-middle |
# Combined
Can close it by clicking outside, pressing ESC or clicking the button
1 Button modal: "my_modal_3" do 2"open modal"
3end
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!"
9end
10 11 p class: "py-4" do 12"Press ESC key, click outside or click the button below to close"
13end
14 15 modal.action do |action| 16 action.close_button :primary do 17"Close"
18end
19end
20end
21end
# Modal with button to close
Can only close it by clicking the button or pressing ESC
1 Button modal: "my_modal_1" do 2"open modal"
3end
4 5 Modal id: "my_modal_1" do |modal| 6 modal.body do 7 h3 class: "text-lg font-bold" do 8"Hello!"
9end
10 11 p class: "py-4" do 12"Press ESC key or click the button below to close"
13end
14 15 modal.action do |action| 16 action.close_button :primary do 17"Close"
18end
19end
20end
21end
# Closes when clicked outside
Can close it by clicking outside or pressing ESC
1 Button modal: "my_modal_2" do 2"open modal"
3end
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!"
9end
10 11 p class: "py-4" do 12"Press ESC key or click outside to close"
13end
14end
15end
# With a close button at the corner
1 Button modal: "my_modal_4" do 2"open modal"
3end
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"✕"
9end
10 11 h3 class: "text-lg font-bold" do 12"Hello!"
13end
14 15 p class: "py-4" do 16"Press ESC key or click the button above to close"
17end
18end
19end
# With custom width
1 Button modal: "my_modal_5" do 2"open modal"
3end
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!"
9end
10 11 p class: "py-4" do 12"Press ESC key, click outside or click the button below to close"
13end
14 15 modal.action do |action| 16 action.close_button :primary do 17"Close"
18end
19end
20end
21end
# Responsive
1 Button modal: "my_modal_6" do 2"open modal"
3end
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!"
9end
10 11 p class: "py-4" do 12"Press ESC key, click outside or click the button below to close"
13end
14 15 modal.action do |action| 16 action.close_button :primary do 17"Close"
18end
19end
20end
21end