How to display a form in modal dialog on page load?

Question

This is on Drupal 8.6, PHP 7.2, Theme is based on Bootstrap.

The scenario is, I want to display a dialog box with a subscription form in the home page. The dialog box will be loaded automatically when page load, not by click any link. I see there are lot of examples there in the net, but all related to by clicking a link, modal will display. But I want to load it without any click.

I partially successful by using BootstrapDialog, but ajax is not working on form submit button. What I did, I attach a js file in the front page, with the code below. It shows the Modal Dialog box, and I tuned a page--newsletter--subscribe.html.twig, its working But submit button not working not ajax is working.

    BootstrapDialog.show({
    title: 'Subscribe To Newsletter',
    message: jQuery('<div></div>').load('/newsletter/subscribe'),
    closable: false,
    draggable: true,
    closeByBackdrop: false,
    closeByKeyboard: false,
    buttons: [{
        label: 'Close',
        action: function(dialogRef){
            dialogRef.close();
        }
    }]
});

I saw there is an example in code node.preview.js file like this:

          var $previewDialog = $('<div>' + Drupal.theme('nodePreviewModal') + '</div>').appendTo('body');
      Drupal.dialog($previewDialog, {
        title: Drupal.t('Leave preview?'),
        buttons: [{
          text: Drupal.t('Cancel'),
          click: function click() {
            $(this).dialog('close');
          }
        }, {
          text: Drupal.t('Leave preview'),
          click: function click() {
            window.top.location.href = event.target.href;
          }
        }]
      }).showModal();

But I never able to make it working in my custom module.

If some one can help on this, will be really great!

Update: I just tried to put a link manually in the template and tried to open the dialog, but it gives me some error:

<a href="/newsletter/registration" class="use-ajax " data-dialog-type="modal">Show Dialog</a>

The error is as follows:

dialog.js?v=8.6.4:35 Uncaught TypeError: $element.dialog is not a function
at openDialog (dialog.js?v=8.6.4:35)
at Object.dialog.showModal (dialog.js?v=8.6.4:52)
at Drupal.AjaxCommands.openDialog (dialog.ajax.js?v=8.6.4:96)
at Drupal.Ajax.success (ajax.js?pkvhqx:155)
at Object.success (ajax.js?v=8.6.4:234)
at i (jquery.min.js?v=3.2.1:2)
at Object.fireWith [as resolveWith] (jquery.min.js?v=3.2.1:2)
at A (jquery.min.js?v=3.2.1:4)
at XMLHttpRequest.<anonymous> (jquery.min.js?v=3.2.1:4)

It seems some of the library is not loaded. Here is my global attachement:

  dependencies:
- core/jquery
- core/jquery.ui
- core/drupal.ajax
- core/drupal
- core/drupalSettings
- core/drupal.dialog
- core/drupal.dialog.ajax
- core/jquery.form
- core/jquery.once
- core/modernizr

Answer 1

What I did, hide the link in the body and from javascript trigger the click event of the link, will show the dialog.