Как задать класс модальным окнам?

Аватар пользователя VasyOK VasyOK 26 ноября 2020 в 17:25

Хорошо, а классы модальным окнам можно как-то задать?
Вывожу информацию в модальных окнах все так же:
<a class="use-ajax" data-dialog-type="modal" href="/mylink">Ссылка</a>

Тут предлагается использовать jQuery Dialog Widget:
https://stackoverflow.com/questions/42729282/add-custom-class-from-link-...

еще варианты есть?

Лучший ответ

Аватар пользователя OldWarrior OldWarrior 26 ноября 2020 в 18:12

VasyOK wrote: еще варианты есть?

А указание класса невозможно через параметры модала?

Маленькое расследование.
Отсюда https://www.drupal.org/docs/drupal-apis/ajax-api/ajax-dialog-boxes:

Available dialog parameters
...
data-dialog-options: A JSON encoded string of options for Drupal.dialog. See http://api.jqueryui.com/dialog/ for all available options.
...

Смотрим https://api.jqueryui.com/dialog/#option-dialogClass:

The dialogClass option has been deprecated in favor of the classes option, using the ui-dialog property.

Тогда смотрим https://api.jqueryui.com/dialog/#option-classes:

Specify additional classes to add to the widget's elements.
...

$( ".selector" ).dialog({
  classes: {
    "ui-dialog": "highlight"
  }
});

Получается что-то вроде:

<a class="use-ajax"data-dialog-options="{&quot;classes&quot;:{&quot;ui-dialog&quot;: &quot;ui-corner-all  my-custom-class&quot;}}"  data-dialog-type="modal" href="/mylink">Ссылка</a>

Где my-custom-class и есть кастомный класс. Можно к нему ещё добавить классы через пробел.

Не проверял, если что. Это чисто по манам.

Комментарии

Аватар пользователя OldWarrior OldWarrior 26 ноября 2020 в 18:12

VasyOK wrote: еще варианты есть?

А указание класса невозможно через параметры модала?

Маленькое расследование.
Отсюда https://www.drupal.org/docs/drupal-apis/ajax-api/ajax-dialog-boxes:

Available dialog parameters
...
data-dialog-options: A JSON encoded string of options for Drupal.dialog. See http://api.jqueryui.com/dialog/ for all available options.
...

Смотрим https://api.jqueryui.com/dialog/#option-dialogClass:

The dialogClass option has been deprecated in favor of the classes option, using the ui-dialog property.

Тогда смотрим https://api.jqueryui.com/dialog/#option-classes:

Specify additional classes to add to the widget's elements.
...

$( ".selector" ).dialog({
  classes: {
    "ui-dialog": "highlight"
  }
});

Получается что-то вроде:

<a class="use-ajax"data-dialog-options="{&quot;classes&quot;:{&quot;ui-dialog&quot;: &quot;ui-corner-all  my-custom-class&quot;}}"  data-dialog-type="modal" href="/mylink">Ссылка</a>

Где my-custom-class и есть кастомный класс. Можно к нему ещё добавить классы через пробел.

Не проверял, если что. Это чисто по манам.

Аватар пользователя VasyOK VasyOK 26 ноября 2020 в 21:13

"А указание класса невозможно через параметры модала?" я не знаю. Потому и спрашиваю.
Т.е. в любом случае для того, чтобы этот параметр использовать в ссылке, нужно использовать https://api.jqueryui.com/dialog или можно и без него?

Аватар пользователя OldWarrior OldWarrior 26 ноября 2020 в 22:38

Он уже входит в jQuery UI, используемый Друпалом.
Это как раз и есть модальный диалог, всплывающий по ссылке с классом "use-ajax".

Но всё же проверьте ссылку с параметрами модала, которую я привёл выше.

Аватар пользователя VasyOK VasyOK 27 ноября 2020 в 12:11

Спасибо OldWarrior. Ссылка вида
<a class="use-ajax"data-dialog-options="{&quot;classes&quot;:{&quot;ui-dialog&quot;: &quot;ui-corner-all  my-custom-class&quot;}}"  data-dialog-type="modal" href="/mylink">Ссылка</a>
добавляет класс к модальному окну.

Без вас не получалось. Smile