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

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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Test Modal&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>';$build .= ' <div class="modal fade" id="modal-xl">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-dialog modal-xl">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="modal-title">Extra Large Modal</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="close" data-dismiss="modal" aria-label="Close">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span aria-hidden="true">&times;</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>One fine body&hellip;</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-footer justify-content-between">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-primary">Save changes</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>';&nbsp; &nbsp; $build .= ' <script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#btn-xl").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#modal-xl").modal();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; ';return $build;}希望我不必像这样使用所有其他组件来欺骗引导程序。PS。确保在回显函数之前加载 JQuery 和 Bootstrap Javascript。