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调用中动态添加文本内容。我有两个按钮SAVE和CANCEL。

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

这里的问题是，当我按下CANCEL按钮时，模态会关闭，但父窗口（正文）滚动不起作用。

提前致谢！

Answer 1

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

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

Answer 2

在这里检查这个小提琴我刚刚输入了一些内容来显示页面滚动
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>

如果问题仍然存在，请将您的代码上传到小提琴并分享，我会检查。

Answer 3

检查你的身体是否有类＆＃39;模型 - 打开＆＃39;，此类添加属性overflow-y：hidden，只需在模型关闭时移除此类

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

滚动停止工作时关闭自举模式

3 个答案: