如何关闭模态窗口？

Question

我找到了一些关于如何使用 Drupal 8 打开模态窗口的教程，并不难：

// 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']));

但是现在我如何以编程方式关闭此窗口？或者更简单地说，我想要模式底部有一个“取消”按钮？

Answer 1

不确定这是否是最好的方法，但如果您对调用 CloseModalDialogCommand() 的方法进行 ajax 调用，模式将关闭。

路线：

#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'

然后是控制器：

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

基于之前的答案，我构建了一个表单并添加了一个像这样的提交和取消按钮。在 module/src/Form/ModalForm.php 文件中，buildform 方法如下所示：

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' => '[email protected]',
      '#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;
  }

这是提交处理程序：

  /**
   * 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;
  }

和取消处理程序

  /**
   * @return \Drupal\Core\Ajax\AjaxResponse
   */
  public function closeModalForm() {
    $command = new CloseModalDialogCommand();
    $response = new AjaxResponse();
    $response->addCommand($command);
    return $response;
  }

Answer 3

我在研究类似问题时偶然发现了这个问题/它的答案。

恕我直言，最简单的方法是使用 Drupal JavaScript 对话框 API，而不是 Ajax 命令和专用服务器端回调处理程序。

更改取消按钮：

$form['actions']['cancel'] = [
  '#type' => 'button',
  '#value' => $this->t('cancel'),
  '#attributes' => [
    'onclick' => "Drupal.dialog(document.getElementById('drupal-modal')).close(); return false;",
  ],
];

它只会关闭对话框并阻止对服务器的任何其他请求。