Как запустить модальное окно через ajaxsnippet?
Павел
563
0
Доброго дня, можете показать пример как запустить модальное окно используя 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 дня и максимум, что удалось сделать
$(document).on('click','.more',function(e){ e.preventDefault(); $("#ins").load("auth.html", function(response){ // Если ответ не пустой, открываем модальное окно if (response) { $("#loginModalCenter").modal('show'); } }); });где auth.html страница со всем этим.При клике на кнопку
в Вставляется содержимое и появляется модальное окно, но естественно в нем ничего не работает (регистрация, вкладки и т.д.)
Поэтому начал рассматривать ajaxsnippet, как вариант, но тоже немного не хватило знаний.
В общем нигде нет ни урока, ни намека на то, как подобную задачу решать, если есть возможность, просветите
officeAuth — это сниппет, который не просто возвращает какой-то результат.
Простое решение из коробки — это когда вызов officeAuth должен присутствовать на странице. Чанк tpl.Office.auth.login.tpl — это не самостоятельный элемент. Он содержит плейсхолдеры, которые при вызове officeAuth должны быть заменены значениями, полученными в результате его выполнения.
У меня готового решения нет, но то, что вы предложили, конечно, работать не будет.