从自定义类添加链接到具有Bootstrap主题的Drupal-modal Drupal 8 [英] Add custom class from link to drupal-modal drupal 8 with bootstrap theme

问题描述

在Drupal 8中，当您创建具有class和data-dialog-type属性(如以下代码)的链接时，具有引导主题:

In Drupal 8, with the bootstrap theme when you create a link with class and data-dialog-type attributes like the bellow code:

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

您将在具有以下html包装器的#drupal-modal元素中打开页面的内容:

You will open content of the page in #drupal-modal element that has these html wrappers:

<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我们如何在链接上看到.

This structure is generated in: \themes\bootstrap\js\modal.js how we can see on the link.

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

How do I modify it so that I can pass a class name to the #drupal-modal element from the link a.use-ajax? The class name text could be value of an attribute of the link.

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

Specifically I'd like to add modal-lg or modal-sm classes or some custom ones.

推荐答案

感谢@Waxi，我已经阅读了另一个问题，我想到了这个问题:

Thanks to @Waxi i have read through the other issue and I came up with this:

$(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事件，因为cz click被某些内容阻止，因此无法使用. 然后它将获取data-dialog-class的内容，因此可以在模式实际加载后将其添加到.modal-dialog元素中，因为在此之前不存在其html

Had to use mousedown event, coz click wouldn't work as it is blocked by something. Then it is getting content of data-dialog-class so it can be added to the .modal-dialog element after the modal actually loads, because its html is not present before that

这篇关于从自定义类添加链接到具有Bootstrap主题的Drupal-modal Drupal 8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！