javascript - 如何在用户触发后呈现模态

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- 使用内联属性直接调用模态:

<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