title: Getting Bootstrap's modal content from another page
body: <p>I have an anchor in a page called <code>menu.html</code> and I'm having trouble getting a Bootstrap modal to display data from another page called <code>Lab6.html</code>.</p>
  
  <p><strong>menu.html</strong></p>
  
  <pre><code>&lt;div class="collapse navbar-collapse navbar-exl-collapse"&gt;
    &lt;ul class="nav navbar-nav" id="menu"&gt;
      &lt;li&gt;&lt;a href="/emplookup.html"&gt;Lookup&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/modalexample.html"&gt;Modals&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Lab6.html#theModal" data-toggle="modal"&gt;Lab 6&lt;/a&gt;&lt;/li&gt;&lt;!-- this one --&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Lab6.html</strong></p>
  
  <pre><code>&lt;div class="modal fade text-center" id="theModal"&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"&gt;X&lt;/button&gt;
          &lt;h1&gt;Lab 6&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;div class="panel panel-default"&gt;
            &lt;div class="panel-heading text-center"&gt;
              Employee Information
            &lt;/div&gt;
            &lt;div class="panel-body"&gt;
              &lt;div class="row"&gt;
                &lt;div class="text-right col-xs-2"&gt;Title:&lt;/div&gt;
                &lt;div class="text-left col-xs-3" id="title"&gt;&lt;/div&gt;
                &lt;div class="text-right col-xs-2"&gt;First:&lt;/div&gt;
                &lt;div class="text-left col-xs-3" id="firstname"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                &lt;div class="text-right col-xs-2"&gt;Phone#&lt;/div&gt;
                &lt;div class="text-left col-xs-3" id="phone"&gt;&lt;/div&gt;
                &lt;div class="text-right col-xs-2"&gt;Email&lt;/div&gt;
                &lt;div class="text-left col-xs-3" id="email"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                &lt;div class="text-right col-xs-2"&gt;Dept:&lt;/div&gt;
                &lt;div class="text-left col-xs-3" id="departmentname"&gt;&lt;/div&gt;
                &lt;div class="text-left col-xs-2"&gt;Surname:&lt;/div&gt;
                &lt;div class="text-left col-xs-4"&gt;
                  &lt;input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;div class="panel-footer"&gt;
              &lt;input type="button" value="Find Employee" id="empbutton" /&gt;
              &lt;div class="col-xs-10" id="lblstatus"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="Scripts/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  &lt;script src="Scripts/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Am I doing anything wrong?</p>