Question

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

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

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

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

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

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

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，它允许您设置类。

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

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

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

使用bootstrap主题从drupal-modal drupal 8链接添加自定义类

4 个答案: