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做了类似的事情，不确定它是否是最好的＆＃39;这样做的方法，但它的确有效。

只需使用带有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);
    });
}

Bootstrap动态模态

1 个答案: