How to close pw-modal ?

[suntrop]

In a custom process module I open a modal window containing a <form>. When I click the submit button, the modal stays open. I can't find a way, other the X from the title bar, to close the modal window.

- How can close the modal, when the submit button was hit?
- Or, how can I implement the buttonpane with the Save button like the PageTable module?
- Or, at least, how can I include my own close button?

That's how I open the modal:

$field = wire('modules')->get('InputfieldButton');
$field->attr('id+name', 'status_update');
$field->attr('class', 'pw-modal pw-modal-small ui-button ui-widget ui-corner-all head_button_clone ui-state-default');
$field->attr('value', 'Update');
$field->attr('data-href', './status-update/?id=' . $op->id);
$form->add($field);

That's my save button

$submit = $modules->get('InputfieldSubmit');
$submit->attr('data-close', 'close');
$submit->attr('value', 'Save');
$submit->attr('name', 'submit_dashboard_status_action');
$form->add($submit);

[gebeer]

You need to set additional data attributes on your button

data-buttons='button#submit_dashboard_status_action' data-autoclose

$field->attr('data-buttons', 'button#submit_dashboard_status_action');
$field->attr('data-autoclose', '');

and your submit button needs an id, too

$submit->attr('id+name', 'submit_dashboard_status_action'); // set id and name in one go

This is documented at the top of file wire/modules/Jquery/JqueryUI/modal.js.

 

[suntrop]

Thanks for the link. Had not found the source. It seems the 'data-close' button will only listen for clicks if it is defined in 'data-buttons' as well. But all buttons living there will get the same design. Not that good, when Save and Cancel look the same, but it will work for now.

[gebeer]

54 minutes ago, suntrop said:

Not that good, when Save and Cancel look the same, but it will work for now

You can always add a custom class to the button and style it according to your needs.