javascript - Bootstrap 动态模态

Question

我一直在尝试使用 Twitter Bootstrap 来执行动态模式，如下所示:

$('#myModal').on('hide', function () { 
    $(this).removeData('modal');
    $('.loading-modal').remove();
})

每次我单击按钮时，它都会重新加载模式中的数据，但是......

我注意到，关闭预览模式后，当我打开下一个模式时，预览数据仍然会显示，几秒钟后就会使用新数据进行更新。

我想要的是，每次调用模态时，它都会将数据设置为“正在加载...”，然后显示新数据。

如何实现这一目标？或者有更好的方法吗？

<小时/>

更新

这就是我使用 data-remove= 调用模态远程数据的方式

<a href="" role="button" data-target="#myModal" data-toggle="modal" data-backdrop="static" data-remote="/manager/test/{{ $donator->USERNO }}"><i class="icon-plus"></i></a>

模态

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Editing Data</h3>
    </div>
    <div class="modal-body">
        <div class="loading-modal">Loading...</div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Answer 1

我使用 Ajax 做了类似的事情，不确定这是否是“最好”的方法，但它确实有效。

只需使用普通按钮/超链接和 Javascript 函数调用即可:

<button class="btn" onclick="showDialog()">Click Me</button>

然后在函数内显示对话框并执行ajax调用:

function showDialog() {
    $("#dialogBody").html("Loading...");  // Or use a progress bar...
    $("#dialog").modal("show");
    $.ajax({
        url: myUrl.com,
    }).success(function(data) {
        $("#dialogBody").html(data);
    });
}