Question

这是在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

任何帮助都会很棒！

Answer 1

此问题与我购买的专业主题“釉面”有关。它删除了引导程序模态库。当我从主题设置禁用Bootstrap Modal库时，Modals正常运行。但是当我尝试启用Bootstrap Modal时，它会给出以下消息，说明所有内容：

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

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

1 个答案: