Bootstrap3のModal(モーダル・ダイアログ)で、毎回異なるリモートのコンテンツを読み込むサンプルソース

<title>Parent Page to Open Modal Window</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
 
 
     
 
    %MINIFYHTML2fb9e371f46a7e05ba69d1e7497b4cec10%%MINIFYHTML2fb9e371f46a7e05ba69d1e7497b4cec11%<link rel="stylesheet" href="http://localhost/sample/bootstrap-3.3.7-dist/css/bootstrap.min.css">
 
 
<h1><span id="Parent_Page_to_Open_Modal_Window">Parent Page to Open Modal Window</span></h1>%MINIFYHTML2fb9e371f46a7e05ba69d1e7497b4cec12%<input type="hidden" name="selected_target" id="selected_target" value="">
 
<a href="#responsive" onclick="OnLinkClick(this);" value="c1.html">Launch Modal(C1)</a>
<br>
<a href="#responsive" onclick="OnLinkClick(this);" value="c2.html">Launch Modal(C2)</a>
 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel"><span id="Modal_Contents">Modal Contents</span></h4>
      </div>
      <div class="modal-body" id="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <div class="text-center">
            <button type="button" class="btn" data-dismiss="modal" id="mdlClose">Close</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" id="mdlChose">Chose</button>
        </div>  
      </div>
    </div>
  </div>
</div>

<title>Child Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     
<h1><span id="Child_Page">Child Page</span></h1>
Child Page Contents

$('#myModal').modal({
    	keyboard: true,
    	backdrop: true
});

$(document).find("#modal-body").load($('#selected_target').val()

$(function () {
	$("#mdlClose").on("click", function(e) {
		console.log('call modal close');
		console.dir($('#myModal'));
		$('#myModal').removeData('bs.modal');
		$('body').removeClass('modal-open');
  		$('.modal-backdrop').remove();
  		$('#modal-body').empty();
  		$('#myModal').modal('hide');
	});
});

Synchronous XMLHttpRequest on the main thread is deprecated 
because of its detrimental effects to the end user's experience. 

.modal-body {
　　　　max-height: calc(100vh - 200px);
　　　　overflow-y: auto;
}