时间戳

首页 > 解决方案 > 如何将引导模式存储在变量中？

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

问题描述

我想编写一个 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 类。

标签： phpfunction

解决方案

好吧，对于模态，我设法通过使用 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。

推荐阅读