You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+15-15Lines changed: 15 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -73,25 +73,25 @@ The `noscroll` modifier prevents scrolling on the background page while the dial
73
73
</div>
74
74
```
75
75
76
-
####`closeby`
76
+
### `closeby`
77
77
78
-
The `closeby` modifier allows you to control which events trigger the close action
79
-
defined in the `x-htmldialog` value (backdrop click and/or Escape key press).
78
+
The `closeby` option gives you fine-grained control over how the dialog can be dismissed. The plugin polyfills this behavior for browsers that do not yet support it natively.
80
79
81
-
This mimics the upcoming native `closeby` behavior of the `<dialog>` element.
80
+
You can set this option in two ways:
82
81
83
-
Available options for the `closeby` modifier:
84
-
85
-
-`.auto` (Same as `.closerequest`). Only triggers the close action on the Escape key press.
86
-
-`.none` Disables all automatic close triggers (backdrop click and Escape key).
87
-
-`.closerequest` Only triggers the close action on the Escape key press.
88
-
-`.any` (Default behavior if no `closeby` modifier is present).
89
-
Triggers the close action on both backdrop clicks and Escape key presses.
90
-
91
-
Example, for disable all automatic closing:
82
+
**1. As an attribute on the `<dialog>` element:**
83
+
```html
84
+
<dialogcloseby="any"...>
85
+
```
92
86
87
+
**2. As a modifier on the `x-htmldialog` directive:**
This way you can keep the close trigger for form submissions and prevent any other close triggers.
92
+
#### Available Options
93
+
94
+
***`any`**: The dialog can be closed by any user action, such as pressing the `ESC` key or clicking on the backdrop.
95
+
***`closerequest`**: (Default) The dialog can be dismissed via the `ESC` key or a "close request" (e.g., a form submission with `method="dialog"`). It will not close when the backdrop is clicked.
96
+
***`none`**: The user cannot close the dialog. It must be closed programmatically.
0 commit comments