How do I render a form with JavaScript?

Question

I'm trying to render a Drupal 8 modal dialog form through JavaScript, so it can appear on multiple pages across my site. In the controller class, I create an AjaxResponse object with an openModalDialogCommand for the modal form. I want to render the modal dialog through JavaScript, so that I can control in which pages it displays.

$(document).ready(function() {
  $('body').append('<div id="ao-interstitial-modal"></div>');
  console.log(Drupal);
  jQuery('#ao-interstitial-modal').load('/aao_additions/modal_form');
});

This the JavaScript code I write so far, but it renders a textarea in the body tag with the AJAX command object as text inside it.

What do I need to do to render the form as a dialog popup?

Answer 1

Loading a form via ajax is no different then loading any other page with ajax. The quick answer is that you should create a route to display the form and then call that route via ajax but for a detailed description you should take a look here: https://www.drupal.org/node/2046693