OpenModalDialogCommand

Linked issue: #3546797: Implement OpenModalDialogCommand in htmx

Ajax API

Opens a modal dialog with provided content.

use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\OpenModalDialogCommand;

public function ajaxHandler(array $form, FormStateInterface $form_state) {
  $response = new AjaxResponse();
  $response->addCommand(
    new OpenModalDialogCommand(
      $this->t('Title'), $form['dialog_contents'], ['width' => 800]
    )
  );
  return $response;
}

HTMX

With native <dialog>, use showModal() after loading content.

use Drupal\Core\Htmx\Htmx;


$after_swap = 'document.getElementById("my-modal")?.showModal()';

(new Htmx())
  ->get($dialogUrl)
  ->target('#my-modal-content')
  ->swap('innerHTML')
  ->on(
    '::afterSwap',
    'document.getElementById("my-modal")?.showModal()'
  )
  ->applyTo($build['open_modal_link_or_button']);

Documentation links

• hx-get
• hx-target
• hx-swap
• hx-on