title: Yii2 Loading Page/Image when Bootstrap Modal is still Loading
body: <p>I have this modal:</p>
  
  <pre><code>&lt;?php
      echo Html::button(
          'Create New Staff',
          [
              'value' =&gt; Url::to(['create-new-staff']),
              'class' =&gt; 'btn btn-success btn-create',
              'id' =&gt; 'modalButton'
          ]);
  
      Modal::begin(['id' =&gt; 'modal']);
      echo "&lt;div id='modalContent'&gt;&lt;/div&gt;";     
      Modal::end();
  ?&gt;  
  </code></pre>
  
  <p>Here's my sample loading indicator image:</p>
  
  <pre><code>&lt;img src="http://dkclasses.com/images/loading.gif" id="loading-indicator" style="display:none" /&gt;
  </code></pre>
  
  <p>When I click the modal button, I want to display a loading screen or image when the modal is still loading instead of just plainly waiting for the modal to load. I tried this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $("modalButton").click(function(event) {
          $.post( "/echo/json/", { delay: 2 } );
          $(document).bind("ajaxSend", function(){
              $("#loading-indicator").show();
              }).bind("ajaxComplete", function(){
              $("#loading-indicator").hide();
              $("#modalContent").show();
           });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I based that script in this <a href="https://jsfiddle.net/q3uhLvbn/" rel="nofollow">fiddle</a>.</p>
  
  <p>And I also tried those I have searched in the internet. None of them worked. I think it's because I am using Yii. I'm not sure. How do I achieve this?</p>