javascript - Bootstrap 模式关闭时滚动停止工作

Question

我使用 Bootstrap v3.1.1 将模态弹出窗口显示到我的网页之一。以下是我添加它的方式。

<!--Start  show add student popup here -->
<div class="modal fade" id="add-student" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div id="divStudentPopUp"></div>
    </div>
</div>
<!--End  show add student popup here -->

<!-- JS Code Goes Here -->
//--- Add Student POP Up Script-- Start
$('#add-student').modal('toggle');
$('#add-student').modal('show');
$('#add-student').modal('hide');
//--- Add Student POP Up Script-- End
<!-- END -->

当模式弹出窗口打开时，我通过 AJAX 调用动态添加文本内容。我上面有两个按钮“保存”和“取消”。

<!-- HTML for Cancel button -->
<button class="hvr-ripple-out btn btn-red cancel" data-dismiss="modal" id="btnCancelStudent">Cancel</button>

这里的问题是当我点击取消按钮时，模态关闭但父窗口(主体)滚动不起作用。

提前致谢!

Answer 1

检查你的 body 是否有'model-open'类，这个类添加属性溢出-y:隐藏，只需在模型关闭时删除这个类

$('#add-student').on('hidden.bs.modal', function () {
    $('body').removeClass('modal-open');
});