Почему-то этот вопрос очень часто задается в Интернете. На деле ничего сложного нет, особенно для любителей UIkit — RSForm имеет на борту всю необходимую разметку. Рассмотрим работу модальных окон UIkit в Joomla на примере компонента RSForm.
Полноэкранный вариант модального окна с картинкой можно взять из примера с модальными окнами.
В качестве подопытного будем использовать стандартный шаблон Joomla Protostar.
Настройка шаблона
Создаем новую позицию в файле templateDetails.xml нашего шаблона, чтобы она появилась в админке. Называем позицию "modal-form".
Внимание Помните, что имя позиции в templateDetails.xml и index.php должно быть одинаковым!
Идем в файл шаблона index.php
В примере используется стандартный код для вывода модуля. Сначала вставляем его:
Берем разметку простейшего модального окна из компонента модальные окна:
<div class="body" id="top">
<!-- Кнопка вызова модального окна -->
<button uk-toggle="target: #my-id" type="button"></button>
<!-- Модальное окно -->
<div id="my-id" uk-modal>
<button class="uk-modal-close" type="button"></button>
</div>
</div>Объединяем все вместе.
Обратите внимание, что необходимо обернуть всю разметку в счетчик countModules, чтобы не выводить лишннее в случае, если модуль не опубликован.
<?php if ($this->countModules('modal-form')) : ?>
<!-- Кнопка вызова модального окна -->
<button uk-toggle="target: #my-id" type="button"></button>
<!-- Модальное окно -->
<div id="my-id" uk-modal>
<button class="uk-modal-close" type="button"></button>
<jdoc:include type="modules" name="modal-form" style="xhtml"/>
</div>
<?php endif; ?>
Настройка компонента RSForm
Не забудьте заглянуть в настройки компонента RSForm. В разделе "Responsive Layouts" выберите интересующий вариант разметки. В нашем случае UIKit 3. Также следует убрать галку "Load Layout CSS / JS". Этим действием мы деактивируем подключение UIkit силами RSForm, чтобы не дублировать код.
Настройка Модуля RSForm
С кодом закончили. Идем в админку Joomla и добавляем/изменяем модуль вывода формы. Устанавливаем для модуля новую позицию.
Готово! Теперь вы знаете, как выводить RSForm в модальном окне без использования iframe и прочей чепухи.