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">的内容。

我希望它可以帮到你。

Bootstrap动态显示模态

1 个答案: