modal-content.html

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h4>My Header</h4>
</div>
<div class="modal-body">
  <ul>
    <li>
      Something in a list.
    </li>
    <li>
      Something in a list.
    </li>
    <li>
      Something in a list.
    </li>
  </ul>
</div>
<div class="modal-footer">
  <button class="btn btn-default" data-dismiss="modal">Close</button>
</div>

modal-shell-and-page.html

<!-- elsewhere in your page -->
<a href="modal-content.html" class="btn btn-default" data-target="#reusable_modal" data-toggle="modal">Show Modal Content</a>
<a href="other-modal-content.html" class="btn btn-default" data-target="#reusable_modal" data-toggle="modal">Show Other Modal Content</a>

<div class="modal fade" id="reusable_modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- this is where the content will be placed by the script -->
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).on('page:change', function(){
 // shims for the Bootstrap Modal, which is bloody-minded about caching content per modal
 $(document).on('click', '#reusable_modal [data-dismiss="modal"]', function (e) {
   $(e.target).removeData('bs.modal');
   $('#reusable_modal .modal-content').empty();
 });
 $(document).on('click', '[data-target="#reusable_modal"]', function(e) {
   $("#reusable_modal .modal-content").load($(this).attr("href"));
 });
});
</script>