jQuery + Bootstrap Modal，在另一個內部打開一個模式…為什么？

Question

我正在嘗試像這樣在引導程序模版中從ajax加載數據：

function edit_company_modal(id){

        $.get('/panel/companies/edit/'+id+'/', function(data) {
                    $('#editCompanyModal').modal('show');
                    $('#editCompanyModal').html(data);

                }
        );
        return false;
    }

但是發生的是，它正在嘗試在另一個內部打開一個模式，並且什么都沒有顯示……但是響應是正確的（在firebug中檢查）

點擊事件后的外觀如下：

<div class="modal fade in" id="editCompanyModal" aria-labelledby="Edit Company" aria-hidden="false" style="display: block;">
     <div class="modal fade" id="editCompanyModal" aria-labelledby="Edit Company" aria-hidden="true">

我應該怎么做？

謝謝

Answer 1

您需要將數據插入到模式容器的主體容器中。由於我們沒有HTML，因此我們采用常規的模式結構並在ajax調用后應用jQuery填充模式容器主體。 注意，由於您將data-target用於按鈕元素，因此不再需要使用.modal('show')

的HTML

<button id="editCompany" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#editCompanyModal">Launch demo modal</button>
<div class="modal fade" id="editCompanyModal" tabindex="-1" role="dialog" aria-labelledby="editCompanyModal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
            <h3>Modal Body</h3>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>

jQuery的

$('#editCompany').click(function() {
  //Get value of id
  // id = ???
  $.ajax({
    url: '/panel/companies/edit/'+id+'/',
    type: 'GET',
    success: (data, status, xhr) ->
      $('#editCompanyModal .modal-body').html(data);
  });
});