如何将引导模式存储在变量中？

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;

}

希望我不必像这样使用所有其他组件来欺骗引导程序。

PS。确保在回显函数之前加载 JQuery 和 Bootstrap Javascript。