如果单击，则加载Bootstrap模式

Question

我的页面中有一个Bootstrap模式，它有很多不同的视频。因此，首次加载时页面加载速度非常慢。

HTML：

    <div class="modal fade" id="dialogTestDialog{{$index}}"  tabindex="-1" role="dialog" aria-labelledby="executionOptionLabel"
    aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
      <div class="">
        <div class="close-video" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i>
        </div>
        <video width="840" id="video">
          <source src="{{box.video}}" type="video/mp4">
          </video>
          <div class="controls">
            <button class="play"><i class="fa fa-play" aria-hidden="true"></i></button>
            <button class="pause"><i class="fa fa-pause" aria-hidden="true"></i></button>
            <button data-dismiss="modal" class="close-btn-bottom"><i class="fa fa-stop" aria-hidden="true"></i></i></button>
            <button class="skip"><i class="fa fa-backward" aria-hidden="true"></i></button>
            <!-- <button onclick="skip(10);"><i class="fa fa-forward" aria-hidden="true"></i></button> -->

            <!-- <button data-dismiss="modal" class="close-btn-bottom"><i class="fa fa-times" aria-hidden="true"></i></i></button> -->
          </div>
...

我该怎么做才能解决这个问题？如何在DOM之后加载模态内容？感谢。