引导动态模态

Bootstrap Dynamic Modal

本文关键字：模态 动态      更新时间：2023-09-26

我一直在尝试用twitter引导做动态模态，像这样:

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

每次点击按钮时都会在模态中重新加载数据但是。

我注意到的是，在关闭预览模态后，当我打开下一个模态时，预览数据仍然显示，几秒钟后它会更新为新数据。

我想要的是，每次modal被调用时，它会设置数据为"Loading…"，然后显示新的数据

如何做到这一点?还是有更好的方法?

这就是我如何使用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>

我使用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);
    });
}
相关文章：