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

Question

Currently, my modal HTML codes are located below my original template. Every time I load the page template, it will load that entire source codes included modal. Is there any way to load that modal HTML codes after the user clicks a button?

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

you have two way:

1- directly call modal using 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- use jQuery method:

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

for more details you can see this link

Answer 2

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

<a data-toggle="modal" href="linktoyourmodaltemplate" data-target="#modal">Click me</a>