Bootstrap 添加自定义类从链接到drupal-modal drupal 8与引导主题

9lowa7mx 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(5)|浏览(304)

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>

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">

This structure is generated in: \themes\bootstrap\js\modal.js how we can see on the link .
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.
Specifically I'd like to add modal-lg or modal-sm classes or some custom ones.

twitter-bootstrap

来源：https://stackoverflow.com/questions/42729282/add-custom-class-from-link-to-drupal-modal-drupal-8-with-bootstrap-theme

5条答案

按热度按时间

omvjsjqw1#

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。

赞(0）回复(0）举报 2022-12-07

v6ylcynt2#

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

赞(0）回复(0）举报 2022-12-07

swvgeqrz3#

我的解决方案
于飞：

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

赞(0）回复(0）举报 2022-12-07

ygya80vv4#

要在这篇文章的评论中添加补充信息，请看下面的例子。我用它来以编程方式隐藏标题栏，但自定义类允许你做同样的甚至更多的事情。

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

赞(0）回复(0）举报 2022-12-07

bfrts1fy5#

使用它来添加自定义类
对话框选项= '{“类”：{“用户界面对话框”：“您的类名”}}'

赞(0）回复(0）举报 2022-12-07