title: Getting bootstrap modal content from another HTML file
body: <p>So basically what I'm trying to achieve is getting the content of a bootstrap modal from another html file instead of placing the modal content on the index html file (because I will need to use it multiple times).</p>
  
  <p>I've tried searching high and low for an answer, and the closest that I've got is this: <a href="https://stackoverflow.com/questions/32958219/getting-bootstraps-modal-content-from-another-page">Getting Bootstrap&#39;s modal content from another page</a></p>
  
  <p>However, I have a problem because it is not showing any of the modal content. It is just displaying a blank modal and I have no idea where I have gone wrong.</p>
  
  <p>Below are my relevant codes:
  Main HTML:</p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;i class="fa fa-bar-chart-o fa-fw"&gt;&lt;/i&gt; Pre-IDA Test
      &lt;/div&gt;
  
      &lt;div class="panel-body"&gt;
          &lt;div id="chartdiv" style="width: 100%; height: 400px;"&gt;&lt;/div&gt;
          &lt;script&gt; pretest() &lt;/script&gt;
          &lt;a href="pretestmodal.html" class="btn btn-info" data-toggle="modal" data-target="#testing"&gt;View Data&lt;/a&gt;
          &lt;div id="testing" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-dialog"&gt;
                  &lt;div class="modal-content"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Modal Content:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
      &lt;/head&gt;
      &lt;body&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;Details&lt;/h4&gt;
      &lt;/div&gt;
      &lt;!-- /.modal-header --&gt;
      &lt;div class="modal-body"&gt;
          &lt;div class="table-responsive"&gt;
              &lt;table class="table table-bordered table-hover table-striped"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Year/Quarter&lt;/th&gt;
                          &lt;th&gt;Indoor Quarterly Results&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;2016 Q1&lt;/td&gt;
                          &lt;td&gt;Q1 (59/60)&lt;/td&gt;                
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;2016 Q2&lt;/td&gt;
                          &lt;td&gt;Q2 (58/60)&lt;/td&gt;     
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;!-- /.table-responsive --&gt;
      &lt;/div&gt;
      &lt;!-- /.modal-body --&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
      &lt;!-- /.modal-footer --&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong>
  After looking at the JavaScript Console, I've found an error which says:</p>
  
  <pre><code>jquery.min.js:4 XMLHttpRequest cannot load file:///E:/PORTAL/pages/pretestmodal.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
  </code></pre>
  
  <p>Any idea how I can fix this?</p>