Содержание:
Как запустить модальное окно через ajaxsnippet?
Доброго дня, можете показать пример как запустить модальное окно используя ajaxsnippet?
Не пойму, что эспользовать в as_trigger и as_target, чтобы кнопка выше открывала модальное окно
Чанк tpl.Office.auth.login.tpl обычное модальное окно bs4
<!-- button --> <div class="user login order-3 ml-auto"> <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#loginModalCenter"> <i class="far fa-user d-lg-none"></i> <span class="d-none d-lg-inline">{'office_auth_login_btn' | lexicon}</span> </a> </div> <!-- end_button -->
[[!AjaxSnippet? &snippet=`officeAuth` &tplLogin=`@FILE chunks/office/tpl.Office.auth.login.tpl` &HybridAuth=`0` &groups=`users` &as_mode=`onclick` &as_trigger=`?` &as_target=`?` ]]
Не пойму, что эспользовать в as_trigger и as_target, чтобы кнопка выше открывала модальное окно
Чанк tpl.Office.auth.login.tpl обычное модальное окно bs4
<!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
Вам необходимо только добавить к кнопке два атрибута. Один из них data-toggle=«modal», а другой data-target. Атрибут data-target в качестве значения должен содержать селектор модального окна. В соответствии с ним кнопка и будем его показывать.
Сниппет officeAuth вообще нет смысла помещать в сниппет AjaxSnippet, т.к. из-за этого у вас не будет работать авторизация.
Вопрос как раз в том, что в чанке tpl.Office.auth.login.tpl очень много информации (несколько форм, 2 модальных окна, полотно текста про «Политику обработки персональных данных» и т.д.) и хотелось бы, что бы все это подгружалось на страницу только после нажатия кнопки «Вход», а не висело в исходном коде каждой страницы сайта. Я проковырялся с js 2 дня и максимум, что удалось сделать
где auth.html страница со всем этим.
При клике на кнопку
в Вставляется содержимое и появляется модальное окно, но естественно в нем ничего не работает (регистрация, вкладки и т.д.)
Поэтому начал рассматривать ajaxsnippet, как вариант, но тоже немного не хватило знаний.
В общем нигде нет ни урока, ни намека на то, как подобную задачу решать, если есть возможность, просветите
officeAuth — это сниппет, который не просто возвращает какой-то результат.
Простое решение из коробки — это когда вызов officeAuth должен присутствовать на странице. Чанк tpl.Office.auth.login.tpl — это не самостоятельный элемент. Он содержит плейсхолдеры, которые при вызове officeAuth должны быть заменены значениями, полученными в результате его выполнения.
У меня готового решения нет, но то, что вы предложили, конечно, работать не будет.