Question

目前，我的模态HTML代码位于原始模板下方。每次加载页面模板时，它都会加载包含模态的整个源代码。有没有办法在用户点击按钮后加载模态HTML代码？

HTML

<!-- Template Codes-->
<button data-toggle="modal" data-target="#modal-content" type="button" ng-click="openModal()" class="btn btn-xs btn-default">
  <i class="fa fa-pencil"></i>
</button>

<!-- My Modal-->
<div id="modal-content" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="block block-themed block-transparent remove-margin-b">
        <div class="block-header bg-primary-dark">
          <ul class="block-options">
            <li>
              <button data-dismiss="modal" type="button"><i class="si si-close"></i></button>
            </li>
          </ul>
          <h3 class="block-title">Content</h3>
        </div>
        <div class="block-content block-content-full">
          <!-- Some Contents-->
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" data-dismiss="modal" class="btn btn-sm btn-default">Close</button>
      <button type="button" data-dismiss="modal" ng-click="" class="btn btn-sm btn-primary"><i class="fa fa-check"></i> Update</button>
    </div>
  </div>
</div>

Answer 1

你有两种方式：

1-使用inline attr直接调用模式：

<button data-toggle="modal" data-target="#modal-content" type="button"  class="btn btn-xs btn-default"  data-target="#modal-success-Public">
  <i class="fa fa-pencil"></i>
</button>

2-使用jQuery方法：

$("#modal-content").modal("show")

有关详细信息，请参阅this link

Answer 2

您可以在单独的g++文件中指定模态模板，然后执行此操作。

html

如何在用户触发后渲染模态

2 个答案: