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

【问题标题】：How to display a form in modal dialog on page load?如何在页面加载时在模式对话框中显示表单？
【发布时间】：2019-01-06 04:47:40
【问题描述】：

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

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

我通过使用 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();

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

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

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

<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

任何帮助都会很棒！

【问题讨论】：

标签： modal-dialog bootstrap-modal drupal-8

【解决方案1】：

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

您的主题正在尝试从引导基础主题加载引导模式覆盖库。此库与 Glazed Builder 不兼容，因此其资产已从页面中删除。要使此消息消失请转到您的（默认）主题设置表单，向下滚动到 Bootstrap 设置，然后在 Javascript 类别下禁用“Bootstrap Modals”设置。

【讨论】：