<script>
  $(function() {
    // Issue in order stack.
    // 1. this code executed.
    // 2. deferred script loaded
    // 3. $.ready executed
    //
    // The timeout here is to ensure all library code is initialized
    //
    // For now the way to use is:
    setTimeout(function() {
      $("#sg-d1ab57").modal('show')
    }, 1)
  })
</script>

<!-- Modal  -->
<div class="modal fade vi-modal" id="sg-d1ab57" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <!-- Modal Layout  -->
        <div class="vi-modal-layout">
          <div class="vi-modal-layout__body">
            <div class="vi-modal-layout__section vi-modal-layout__section--header-close">
              <div class="vi-modal-layout__header vi-typesystem vi-typesystem--collapse-last">
                <h3>Page Load</h3>
              </div>
              <div class="vi-modal-layout__close">
                <!-- Button type: close  -->
                <button aria-label="Message dialog - click to close or navigate to the message content" data-dismiss="modal" type="button" class="vi-btn-close vi-btn-close--accent-1 vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></button>
              </div>
            </div>
            <div class="vi-modal-layout__section">
              ...
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>