twitter-bootstrap - Bootstrap 动态显示模态

Question

我通过将模式附加到我的页面的主体来在 JS 中动态添加模式，但是当我调用以下命令时它没有显示。

$('#modalId').modal('show');

这是因为 html 是动态添加的吗？如果是这样，我如何将模态显示附加到事件中？

这是我的模态

<div id="modalId" class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;</button>
        <h4 class="modal-title">
            Detach Site</h4>
    </div>
    <div class="modal-body">
        <p>
            Are you sure you wish to detach the following Site Server from this site?</p>
        <div class="form-group">
            <strong id="server-delete-name"></strong>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
            Close</button>
        <button id="delete-siteserver" type="button" data-delete-id="" class="btn btn-danger">
            Detach</button>
    </div>
</div>

我正在使用 $('body').append(); 将此模态附加到正文中。

Answer 1

我使用这样的模态。在页面的 HTML 中，我加载了模式的骨架：

<div id="modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

然后，在我的 ajax 中，我加载了模式的内容。我的意思是：

<div class="modal-header">
    Header content 
</div>
<div class="modal-body" id="modal-body">
    Body content
</div>
<div class="modal-footer">
     Footer content
</div>

对于每个 ajax 调用，我都会将 的内容<div class="modal-content">替换为新结果。

我希望它对你有帮助。