En Drupal 8, con el tema de arranque cuando crea un enlace con atributos de class y data-dialog-type como el siguiente código:
<a class="use-ajax" data-dialog-type="modal" href="http://drupal.page/front">text </a> Abrirá el contenido de la página en #drupal-modal que tiene estos contenedores 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"> Esta estructura se genera en: \themes\bootstrap\js\modal.js como podemos ver en el enlace .
¿Cómo lo modifico para poder pasar un nombre de clase al elemento #drupal-modal desde el enlace a.use-ajax ? El texto del nombre de la clase podría ser el valor de un atributo del enlace.
Específicamente, me gustaría agregar clases modal-lg o modal-sm o algunas personalizadas.
data-dialog-options le permite pasar cualquier opción al widget de diálogo de jQuery . Una de las opciones es dialogClass que le permite configurar la clase.
ejemplo html:
<a class="use-ajax" data-dialog-type="modal" data-dialog-options="{"width":800, "dialogClass": "product-information-incorrect"}" href="#">Click me !</a>No se necesitan js personalizados.
Gracias a @Waxi, he leído el otro problema y se me ocurrió esto:
$(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); }) }); Tuve que usar el evento mousedown , porque el click no funcionaría porque está bloqueado por algo. Luego, obtiene contenido de data-dialog-class para que pueda agregarse al elemento .modal-dialog después de que el modal realmente se cargue, porque su html no está presente antes de eso
Mi solución
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); })