Skip to content

Commit a18e897

Browse files
committed
Add must-interact documentation
1 parent 7844001 commit a18e897

1 file changed

Lines changed: 19 additions & 0 deletions

File tree

docs/development/services/modal.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,25 @@ Finally, we need to create our Bulk Action Controls with some special data attri
130130

131131
Now when a user selects some content in the table, the bulk action controls should appear, and when "Remove" is selected and submitted, a modal will appear showing a list of content about to be deleted, where they can then confirm the deletion and your `POST` handler will be fired.
132132

133+
## Advanced functionality
134+
135+
### Required interaction
136+
137+
By default, clicking the close button, the escape key, or anywhere outside of the modal will close it, acting similar to cancelling the action the modal was prompting for. But if you want to prevent this default behavior and instead want to require the modal to be interacted with, you can add the `must-interact` class as part of the `name` parameter.
138+
139+
$modal_vars = array(
140+
'name' => 'hello must-interact',
141+
// ... other settings
142+
);
143+
$modal_html = ee('View')->make('ee:_shared/modal_confirm_delete')->render($modal_vars);
144+
145+
NOTE: Note: you will also need to add custom JS to remove `.must-interact`, and then trigger `$(modal).trigger('modal:close')` in order to close it.
146+
147+
$('.modal-wrap .dialog__buttons button').on('click', function() {
148+
$(this).closest('.must-interact').removeClass('must-interact');
149+
$(this).closest('.modal').trigger('modal:close');
150+
});
151+
133152
## CP/Modal Service Methods
134153

135154
**class `ExpressionEngine\Service\Modal\ModalCollection`**

0 commit comments

Comments
 (0)