Jquery + Bootstrap Modal，在另一个里面打开一个模态......为什么？答案

【问题标题】：Jquery + Bootstrap Modal, open a modal inside the other... why?Jquery + Bootstrap Modal，在另一个里面打开一个模态......为什么？
【发布时间】：2014-07-18 15:47:24
【问题描述】：

我正在尝试在这样的引导模式中从 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">

我应该怎么做这样的事情？

谢谢

【问题讨论】：

我会坚持使用 1 个模态模态，并使用 ('#yourmodal .modal-body').html() 更改其中的元素。
因为你的函数完成了它的工作。尝试使用promise。api.jquery.com/promise

标签： javascript jquery ajax twitter-bootstrap modal-dialog

【解决方案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);
  });
});

【讨论】：