Как запустить модальное окно через ajaxsnippet?

Доброго дня, можете показать пример как запустить модальное окно используя ajaxsnippet?

<!-- 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>

$(document).on('click','.more',function(e){ e.preventDefault(); $("#ins").load("auth.html", function(response){ // Если ответ не пустой, открываем модальное окно if (response) { $("#loginModalCenter").modal('show'); } }); });

Комментарии: 3

Александр Мальцев
2019-02-22 15:06:34
Доброго! Для запуска модального окна Bootstrap не нужен MODX компонент AjaxSnippet. Это выполняется с помощью JavaScript. Но и код JavaScript для этого случая писать не надо, он уже содержится в bootstrap.js.
Вам необходимо только добавить к кнопке два атрибута. Один из них data-toggle=«modal», а другой data-target. Атрибут data-target в качестве значения должен содержать селектор модального окна. В соответствии с ним кнопка и будем его показывать.
Сниппет officeAuth вообще нет смысла помещать в сниппет AjaxSnippet, т.к. из-за этого у вас не будет работать авторизация.

Павел
2019-02-22 23:18:09
С запуском модального окна все понятно, с этим вопросов нет, оно уже работает.
Вопрос как раз в том, что в чанке 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 страница со всем этим.
При клике на кнопку
```
<a href="#" class="btn btn-primary more" data-toggle="modal" data-target="#loginModalCenter">
```
в
```
<div id="ins"></div>
```
Вставляется содержимое и появляется модальное окно, но естественно в нем ничего не работает (регистрация, вкладки и т.д.)

Поэтому начал рассматривать ajaxsnippet, как вариант, но тоже немного не хватило знаний.

В общем нигде нет ни урока, ни намека на то, как подобную задачу решать, если есть возможность, просветите