滚动引导模式关闭时停止工作

Scrolling Stops working when bootstrap modal is closed

本文关键字：停止工作 模式 滚动      更新时间：2023-09-26

我使用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>

这里的问题是，当我点击CANCEL按钮时，模式会关闭，但父窗口（主体）滚动不起作用。

提前感谢！

检查您的主体是否有类"model open"，该类添加属性overflow-y：hidden，只需在模型关闭时删除该类

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

这是一个常见的问题，添加一个回调函数。

$('add-student').removeClass('modal-open');

在这里检查这个小提琴我刚刚键入了一些内容来显示页面滚动
http://jsfiddle.net/KyleMit/0fscmf3L/

   <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>

如果任何问题仍然存在，请上传你的代码到fiddle并分享，我会检查。

相关文章：