Question

我们有：

$('#myModal').modal({
    show: true,
    remote: '/some/api/url/',
    //onComplete: function() ???
    //success: function() ???
});

每次成功加载数据时如何制作console.log（）？

Answer 1

来自documentation：

远程

此选项自v3.3.0起已弃用，并已在v4中删除。我们建议使用客户端模板或数据绑定框架，或者自己调用jQuery.load。

无论如何，您可以使用：

loaded.bs.modal当模态使用远程选项
加载内容时会触发此事件

所以代码，在你的情况下将是：

$('#myModal').on('loaded.bs.modal', function (e) {
      // do something...
})

一个例子：

$('#myModal').modal({
  show: true,
  remote: 'https://api.github.com/users/defunkt'
});
$('#myModal').on('loaded.bs.modal', function (e) {
  $("#myModal").css({"height":'150px',"overflow-y":"auto"});
  console.log('remote content loaded');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

如何使用bootstrap模式处理数据的成功加载？

1 个答案: