Bootstrap模态AJAX调用未显示

I'm trying to show a modal dialog on a list of search results that are displayed in a table. When the user clicks the button to show the dialog I need to pass a value from the PHP code to the modal dialog so it can retrieve data about the record they have clicked on which will then appear in the modal dialog.

Here's the HTML for the table of results:

 <tr>
 <td><button class="btn btn-default" recid="33926"  onclick="showModal(33926)">Review</button></td><td>1</td><td>Pending</td><td>001</td>
 </tr>
 <tr>
 <td><button class="btn btn-default" recid="33951"  onclick="showModal(33951)">Review</button></td><td>1</td><td>Pending</td><td>002</td>
 </tr>

Here's the Javascript that gets called when the Review button is clicked:

  <script type="text/javascript">
      function showModal(recid)
        {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
           {
           if (xmlhttp.readyState==4 && xmlhttp.status==200)
             {
             document.getElementById("myModal").innerHTML=xmlhttp.responseText;
             }
          }
        xmlhttp.open("POST","modalInc.php",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("recid="+recid);
        return false;  // Do not follow hyperlink
        }
      </script>

and here's the html for the modal dialog that should appear with the dynamic content:

  <div class="modal fade bs-example-modal-lg" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
         <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
       </div>
       <div class="modal-body">
            <div id="modalContent">

            </div>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Approve</button>
         <button type="button" class="btn btn-default" data-dismiss="modal">Reject</button>
         <button type="button" class="btn btn-default" data-dismiss="modal">On Hold</button>
       </div>
     </div>
    </div>
  </div>

The modal dialog isn't being shown at the moment - I suspect there's the Javascript isn't calling it correctly but I can't seem to get the correct syntax for this.

I assume you are returning modal html already. You are setting modal dialog html but you need to trigger modal also. You can use following;

... if (xmlhttp.readyState==4 && xmlhttp.status==200) { var modalObj = document.getElementById("myModal"); modal.innerHTML = xmlhttp.responseText; modal.modal(); } .....