Question

不确定原因，但是在点击“关闭”按钮后，我的Bootstrap Modal冻结了我的屏幕。 Bootstrap版本是3.3.6

模态代码：

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" !important>
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Edit Message</h4>
            </div>
            <div class="modal-body">
                <textarea class="form-control" rows="10" ng-model="msg.message" required autofocus style="max-width: 100%;">{{msg.message}}</textarea>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-default" ng-click="controller.edit(msg)">Edit And Close</button>
            </div>
        </div>

    </div>
</div>

按住鼠标点击调用模式：

<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-pencil"></span></button>

关闭后调用方法：

public edit(message) {
    console.log(message);
    this.$http.put(`api/causemessage`, message).then((res) => {
        this.$state.reload();
    });
}

如果有人可以帮助诊断这个问题，我们将不胜感激！

Answer 1

尝试在关闭时调用的方法中使用以下脚本。

$（ '＃myModal'）模态（ '隐藏'）;

Answer 2

对于Bootstrap 4

不确定是否有人还在寻找该问题的答案。遇到类似的问题。我使用了jQuery

$("#modalId").modal('hide'); 
$('.modal-backdrop').remove();

，这只会关闭模式并删除背景（阴影），但是页面仍被冻结。这是因为更改为<body class='modal-open'> 需要添加另一个jquery来删除class =“ modal-open”，以使整个页面可再次滚动。

Answer 3

我在 Bootstrap 4 中遇到了同样的问题。

我采取了以下步骤：

将 Id 分配给按钮而不是数据目标

使用 jquery 触发模态

 $('#button-id').on('click', function() {
  $('#modal-id').modal('show'); 
     });

然后，按照这个答案bootstrap 4 modal-backdrop style (specific modal)

我的问题已解决。

关闭后Bootstrap Modal冻结页面

3 个答案: