问题
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.
回答1:
data-dialog-options allows you to pass any options to jQuery's Dialog Widget. One of the options is dialogClass
which allows you to set the class.
Example html:
<a class="use-ajax"
data-dialog-type="modal"
data-dialog-options="{"width":800, "dialogClass": "product-information-incorrect"}"
href="#">Click me !</a>
No custom js needed.
回答2:
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);
})
});
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
回答3:
My solution
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);
})
来源:https://stackoverflow.com/questions/42729282/add-custom-class-from-link-to-drupal-modal-drupal-8-with-bootstrap-theme