title: Display This Bootstrap Modal on Page Load
body: <p>I have the following Bootstrap modal...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="tallModal" class="modal modal-wide fade"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /.modal-content --&gt;
    &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.modal.modal-wide .modal-dialog {
    width: 90%;
  }
  .modal-wide .modal-body {
    overflow-y: auto;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(".modal-wide").on("show.bs.modal", function() {
    var height = $(window).height() - 200;
    $(this).find(".modal-body").css("max-height", height);
  });
  </code></pre>
  
  <p>Here it is on CodePen: <a href="https://codepen.io/TomAshley/pen/wPxBjB" rel="nofollow noreferrer">https://codepen.io/TomAshley/pen/wPxBjB</a></p>
  
  <p>How can I get the modal to display as soon as the page loads? My attempt of this is using <code>window.load</code> as you can see here:</p>
  
  <pre><code>$(window).load("show.bs.modal", function() {
          var height = $(window).height() - 200;
          $(this).find(".modal-body").css("max-height", height);
      });
  </code></pre>
  
  <p>But it doesn't popup the modal. How to make it pop on page load?</p>