How to close a modal window? - drupal-8

Question

I've found a few tutorials on how to open a modal window using Drupal 8, not so hard:
// Add an AJAX command to open a modal dialog with the form as the content.
$response->addCommand(new OpenModalDialogCommand('Load Window', $modal_form, ['width' => '800']));
But now how do I programmatically close this window? Or more simply, I would like a "Cancel" button available at the bottom of the modal?

Answer 1

Not sure if this is the best way to do it, but if you make an ajax call to a method that calls the CloseModalDialogCommand() the modal will close.
The route:
#Close the modal form
product.closeProductModal:
path: '/close-modal-form'
defaults:
_controller: '\Drupal\product\Controller\ModalController::closeModalForm'
_title: 'Close modal'
requirements:
_permission: 'access content'
_role: 'administrator'
And then the controller:
Use Drupal\Core\Ajax\CloseModalDialogCommand;
class ModalController extends ControllerBase {
public function closeModalForm(){
$command = new CloseModalDialogCommand();
$response = new AjaxResponse();
$response->addCommand($command);
return $response;
}
}

Answer 2

Building on the previous answer, I built a form and added a submit and cancel button like this. In the module/src/Form/ModalForm.php file the buildform method looks like this:
class ModalForm extends FormBase {
public function buildForm(array $form, FormStateInterface $form_state, $options = NULL) {
$form['#prefix'] = '<div id="modal_example_form">';
$form['#suffix'] = '</div>';
$form['name'] = [
'#type' => 'textfield',
'#title' => $this->t('Name'),
'#size' => 20,
'#default_value' => 'Joe Blow',
'#required' => FALSE,
];
$form['email'] = [
'#type' => 'email',
'#title' => $this->t('Email'),
'#size' => 30,
'#default_value' => 'Joe#Blow.com',
'#required' => FALSE,
];
$form['actions'] = array('#type' => 'actions');
$form['actions']['send'] = [
'#type' => 'submit',
'#value' => $this->t('Submit me bebe'),
'#attributes' => [
'class' => [
'use-ajax',
],
],
'#ajax' => [
'callback' => [$this, 'submitModalFormAjax'],
'event' => 'click',
],
];
$form['actions']['cancel'] = [
'#type' => 'submit',
'#value' => $this->t('cancel'),
'#attributes' => [
'class' => [
'use-ajax',
],
],
'#ajax' => [
'callback' => [$this, 'closeModalForm'],
'event' => 'click',
],
];
$form['#attached']['library'][] = 'core/drupal.dialog.ajax';
return $form;
}
Here is the submit handler:
/**
* AJAX callback handler that displays any errors or a success message.
*/
public function submitModalFormAjax(array $form, FormStateInterface $form_state) {
$response = new AjaxResponse();
// If there are any form errors, re-display the form.
if ($form_state->hasAnyErrors()) {
$response->addCommand(new ReplaceCommand('#modal_example_form', $form));
}
else {
//Close the modal.
$command = new CloseModalDialogCommand();
$response->addCommand($command);
}
return $response;
}
and the cancel handler
/**
* #return \Drupal\Core\Ajax\AjaxResponse
*/
public function closeModalForm() {
$command = new CloseModalDialogCommand();
$response = new AjaxResponse();
$response->addCommand($command);
return $response;
}