title: Load bootstrap modal from seperate page on button click
body: <p>I have a web-page <code>default.html</code> containing button with <code>id ="btn-add"</code> and another page <code>add-students.html</code> containing only bootstrap modal. How can I load modal in <code>default.html</code> on clicking a button (<code>btn-add</code>).</p>
  
  <p>Code for Button :</p>
  
  <pre><code>        &lt;a href="#" class="btn btn-primary" id="btn-add" style="float:right" data-toggle="modal" data-target="#myModal2" &gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;strong&gt; Add&lt;/strong&gt;&lt;/span&gt;
  </code></pre>
  
  <p>First one loads table automatically on page load from next page. I did similarly for modal but didn't work.</p>
  
  <pre><code>$(document).on("ready", function () {
              //load student table automatically
                  $.ajax({
                      url: "ajax/grid/grid-students.html",
                      success: function (result) {
                          $("#data").html(result);
                      }                     
  
                  });
             //load modal 
                  $("btn-add").click(function () {
                      $.ajax({
                          url: "ajax/add/add-students.html", success: function (result) {
                              $(document).load(result);
                          }
                      });
                  });
  
  
  
         });
  </code></pre>
  
  <p>my modal code in add-students:</p>
  
  <pre><code> &lt;div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                  &lt;h4 class="modal-title" id="myModalLabel"&gt;Applicants&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
  
                  &lt;form role="form"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon" id="basic-addon1"&gt;&lt;span class="glyphicon glyphicon-asterisk"&gt;&lt;/span&gt;&lt;/span&gt;
                          &lt;input type="text" class="form-control" placeholder="ID" aria-describedby="basic-addon1" required&gt;
                      &lt;/div&gt;&lt;br /&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon" id="basic-addon1"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;&lt;/span&gt;
                          &lt;input type="text" class="form-control" placeholder="Name" aria-describedby="basic-addon1" required&gt;
                      &lt;/div&gt;&lt;br /&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon" id="basic-addon1"&gt;&lt;span class="glyphicon glyphicon-envelope"&gt;&lt;/span&gt;&lt;/span&gt;
                          &lt;input type="email" class="form-control" placeholder="Email" aria-describedby="basic-addon1" required&gt;
                      &lt;/div&gt;&lt;br /&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon" id="basic-addon1"&gt;&lt;span class="glyphicon glyphicon-earphone"&gt;&lt;/span&gt;&lt;/span&gt;
                          &lt;input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1" required&gt;
                      &lt;/div&gt;
  
  
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                          &lt;button type="submit" class="btn btn-primary"&gt;Save&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>