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

Jquery + Bootstrap Modal, open a modal inside the other... why?

本文关键字：模态 另一个 内部 为什么 Bootstrap Modal Jquery      更新时间：2023-09-26

我试图加载数据从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">

我该怎么做呢?

谢谢

您需要将数据插入到模态的主体容器中。因为我们没有你的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);
  });
});
相关文章：