如何在页面加载时在模态对话框中显示表单？

Question

这是在 Drupal 8.6、PHP 7.2 上，主题基于 Bootstrap。

场景是，我想在首页显示一个带有订阅表单的对话框。该对话框将在页面加载时自动加载，而不是通过单击任何 link。我看到网上有很多示例，但所有相关的示例都可以通过单击 link，模态显示。但是我想不点击就加载它。

我使用 BootstrapDialog 部分成功了，但是 ajax 无法处理表单提交按钮。我做了什么，我在首页附加了一个 js 文件，代码如下。它显示模态对话框，我调整了一个页面--newsletter--subscribe.html.twig，它正在工作但是提交按钮不起作用不是ajax正在工作。

    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();
        }
    }]
});

我看到代码 node.preview.js 文件中有这样一个示例：

          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();

但我始终无法让它在我的自定义模块中工作。

如果有人能在这方面提供帮助，那就太好了！

更新：我只是尝试在模板中手动放置一个 link 并尝试打开对话框，但它给了我一些错误：

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

错误如下：

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)

似乎有些库没有加载。这是我的全局附件：

  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

此问题与我购买的名为 "glazed" 的专业主题有关。它删除了 bootstrap 模态库。当我从主题设置中禁用 Bootstrap 模态库时，模态可以正常工作。但是当我尝试启用 Bootstrap 模态时，它给出了以下消息，解释了一切：

Your theme is trying to load the Bootstrap Modals override library from the bootstrap basetheme. This library is not compatible with Glazed Builder and therefore its assets have been removed from the page. To make this message disappear Please go to your (default) theme settings form, scroll down to Bootstrap settings, and under the Javascript category disable the "Bootstrap Modals" setting.

如何在页面加载时在模态对话框中显示表单？

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

modal-dialog

drupal-8

bootstrap-modal