Drupal 8添加一个cancel按钮，用来关闭模态框

作者：亚艾元技术部

Drupal8对ajax，模态框的支持非常友好，我们在客户的项目中，多次使用，为客户的项目提供了友好的用户体验。

客户想增加一个cancel按钮，点击cancel关闭模态框，我们是这样实现的，增加cancel按钮：

   if ($this->isDialog()) {
      $form['submit'] = [
        '#type' => 'submit',
        '#value' => $this->t('保存'),
        '#prefix' => '<div id="submit-button-container">',
        '#suffix' => '</div>',
        '#ajax' => array(
          'callback' => '::ajaxSubmit',
          'event' => 'click',
        ),
      ];

      $form['cancel'] = [
        '#type' => 'button',
        '#value' => $this->t('取消'),
        '#prefix' => '<div id="cancel-button-container">',
        '#suffix' => '</div>',

      ];	  
    }

追加我们的库

 $form['#attached']['library'][] = 'myuser/userform';

在我们的对应js文件中，增加js代码：

(function ($, Drupal) {
  //drupalSettings.fluffiness.cuddlySlider.baz
  //console.log(drupalSettings);
  'use strict';
  

  /**
   * Add custom js.
   *
   * @type {Drupal~behavior}
   *
   * @prop {Drupal~behaviorAttach} attach
   *
   */
  Drupal.behaviors.userform = {
    attach: function (context, settings) {

		$(context).find('#cancel-button-container input').click(function (e) {
             e.preventDefault();
			 $('.ui-dialog-titlebar .ui-dialog-titlebar-close').click();
		});	  

    }
  };

}(jQuery, Drupal));

这段js代码的作用，就是点击cancel按钮的时候，触发点击模态框右上角的关闭按钮。我们没有找到直接关闭模态框的函数，这样，也能很好的解决问题。