将 link 中的自定义 class 添加到具有 bootstrap 主题的 drupal-modal drupal 8

Question

在 Drupal 8 中，当您使用 bootstrap 主题创建具有 class 和 data-dialog-type 属性的 link 时，如下面的代码：

<a class="use-ajax" data-dialog-type="modal"
  href="http://drupal.page/front">text
</a>

您将在具有这些 html 包装器的 #drupal-modal 元素中打开页面内容：

<div id="drupal-modal" class="modal fade in" tabindex="-1" role="dialog" style="display: block;">
    <div class="modal-dialog" role="document">
         <div class="modal-content">

这个结构生成于：\themes\bootstrap\js\modal.js我们如何在link.

上看到

如何修改它以便我可以将 class 名称从 link a.use-ajax 传递给 #drupal-modal 元素？ class 名称文本可以是 link 的属性值。

具体来说，我想添加 modal-lg 或 modal-sm class 或一些自定义的。

Answer 1

感谢@Waxi，我已经阅读了另一期，然后想到了这个：

$(document).on("mousedown", ".use-ajax", function () {
    var modalClass = $(this).data('dialog-class');
    $(document).on('show.bs.modal','.modal', function () {
        $('.modal-dialog',this).addClass("modal-" + modalClass);
    })
});

不得不使用 mousedown 事件，因为 click 不会工作，因为它被某些东西阻止了。然后它正在获取 data-dialog-class 的内容，因此它可以在模态实际加载后添加到 .modal-dialog 元素，因为它的 html 在

之前不存在

Answer 2

我的解决方案

HTML:

<a class="use-ajax" data-dialog-type="modal" href="#" data-dialog-class="your-class">Click me !</a>

Javascript:

  var modalClass;

  $(document).on("mousedown", ".use-ajax", function () {
      modalClass = $(this).data('dialog-class');
      $(document).on('show.bs.modal','.modal', function () {
          $(this).addClass(modalClass);
      })
  });

  // Add this part to remove the class when the modal is closed.
  $(document).on('hide.bs.modal','.modal', function () {
      $(this).removeClass(modalClass);
  })

Answer 3

data-dialog-options 允许您将任何选项传递给 jQuery's Dialog Widget。其中一个选项是 dialogClass，它允许您设置 class.

示例html：

<a class="use-ajax" 
  data-dialog-type="modal" 
  data-dialog-options="{&quot;width&quot;:800, &quot;dialogClass&quot;: &quot;product-information-incorrect&quot;}" 
  href="#">Click me !</a>

无需自定义 js。

Answer 4

要在此 post 的评论中添加补充信息，请参见以下示例。我用它以编程方式隐藏标题栏，但自定义 class 允许您执行相同甚至更多操作。

let dialog = Drupal.dialog('#idSelector', {
  'modal': true,
  'dialogClass': 'yourCustomClass',
  'create': function (event, ui) {
    $(ui).find(".ui-dialog-titlebar").hide();
  }
});

将 link 中的自定义 class 添加到具有 bootstrap 主题的 drupal-modal drupal 8

Add custom class from link to drupal-modal drupal 8 with bootstrap theme

javascript

jquery

drupal-8

twitter-bootstrap

bootstrap-modal