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

在前一个答案的基础上，我构建了一个表单并添加了这样的提交和取消按钮。在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' => '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;
  }

这是提交处理程序：

  /**
   * 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 2

不确定这是否是最佳方法，但是如果对调用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;
    }
}

如何关闭模态窗口？

2 个答案: