Javascript 引导模式仅显示上边框

我有一个多模态的网页。对于这个问题，我正在打开一个模式，用户正在输入一些数据，正在运行一个查询，并且显示在一个网格中。这个模式关闭。然后，对于返回的每一行，都有一个选择按钮，该按钮将打开一个新的模式，该模式将填充来自此行的数据。问题是第二种模式没有显示。有一个细条，看起来像模态的边框，背景确实会像模态显示一样淡入淡出。此外，如果在运行查询之前单击此选择按钮，则模式工作正常

<!-- Modal -->
<div id="service-code-details" class="modal hide fade" role="dialog" aria-hidden="true" >
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h2 id="myModalLabel">Service Code Details</h2>
  </div>
  <div class="modal-body">
        <div class="modal-body">
            <p>some content</p>
            <input type="text" name="Id" id="Id" value=""/>
        </div>
  </div>
</div>

<!--button-->
<a  data-id="12345" title="Add this item" class="open-ServiceCodeDetails btn" href="#service-code-details">Select</a>


$(document).on("click", ".open-ServiceCodeDetails", function () {
 var Id = $(this).data('id');
 $(".modal-body #Id").val( Id );
 $("#service-code-details").modal('show');
});

---

为什么模态体嵌套在模态体中？还要确保第二个模态的html没有嵌套在第一个模态中。