使用引导主题将自定义类从链接添加到 drupal-modal drupal 8答案

【问题标题】：Add custom class from link to drupal-modal drupal 8 with bootstrap theme使用引导主题将自定义类从链接添加到 drupal-modal drupal 8
【发布时间】：2017-08-01 10:35:46
【问题描述】：

在 Drupal 8 中，当您使用 class 和 data-dialog-type 属性创建链接时使用引导主题，如下面的代码：

<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上看到。

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

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

【问题讨论】：

stackoverflow.com/questions/10626885/…

标签： javascript jquery twitter-bootstrap bootstrap-modal drupal-8

【解决方案1】：

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

示例 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。

【讨论】：

【解决方案2】：

感谢@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 不存在

【讨论】：

【解决方案3】：

我的解决方案

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

【讨论】：

【解决方案4】：

要在这篇文章中为 cmets 添加补充信息，请参阅以下示例。我使用它以编程方式隐藏标题栏，但自定义类允许您执行相同甚至更多操作。

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

【讨论】：