Как я могу хранить модальные bootstrap внутри переменной?

Question

Я хочу написать функцию php для генерации модального Bootstrap, чтобы я мог просто вызывать ее для создания большего количества модальных мод. Таким образом уменьшая повторение кода. Мой первый подход состоял в том, чтобы сохранить все HTML в переменной, а затем вернуть его, как показано в функции ниже.

function modal(){
    $build = ' <button type=button class="btn btn-primary" data-toggle="modal" data-target="modal-xl">
                    Test Modal
                </button>';
    $build .= ' <div class="modal fade" id="modal-xl">
                  <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h4 class="modal-title">Extra Large Modal</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>One fine body&hellip;</p>
                      </div>
                      <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>';
    return $build;
}

И затем, чтобы сгенерировать его, я просто сделал бы

<?=modal()?>

Моя проблема с этим подходом состоит в том, что, хотя код вставлен в мою страницу, я не могу открыть рассматриваемый модал.

У кого-нибудь есть хоть какой-нибудь? или альтернативный способ сделать это?

Я надеялся создать класс Builder для различных компонентов, подобных этому.

Answer 1

Ладно для модалей, мне удается заставить его работать, используя вместо этого javascript триггер.

function modal(){
$build = ' <button type=button class="btn btn-primary" id="btn-xl">
                Test Modal
            </button>';
$build .= ' <div class="modal fade" id="modal-xl">
              <div class="modal-dialog modal-xl">
                <div class="modal-content">
                  <div class="modal-header">
                    <h4 class="modal-title">Extra Large Modal</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <p>One fine body&hellip;</p>
                  </div>
                  <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>';
    $build .= ' <script>
                    $(document).ready(function(){
                        $("#btn-xl").click(function(){
                            $("#modal-xl").modal();
                        });
                    });
                </script>
    ';
return $build;
}

Надеюсь, мне не придется обманывать bootstrap, как это со всеми другими компонентами.

PS. Обязательно загрузите JQuery и Bootstrap Javascript, прежде чем повторить функцию.