Question

我正在尝试从ajax中加载一个bootstrap模式中的数据，如下所示：

function edit_company_modal(id){

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

                }
        );
        return false;
    }

但是发生的事情是，它试图在另一个内部打开一个模态，没有任何显示......但是反应是正确的（在萤火虫上检查）

这就是点击事件后的样子：

<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，所以我们采用一般的模态结构并应用jQuery来填充模态＆＃39;在ajax召唤之后的身体。请注意，因为您使用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);
  });
});

Jquery + Bootstrap Modal，在另一个内部打开一个模态......为什么？

1 个答案: