将bootstrap模式滚动到底部时启用按钮

Question

我想强制用户阅读模态中的所有协议.如果他们不滚动到文本的最后一行,这个想法很简单.该按钮仍然禁用.但该按钮未启用.这是我的代码:

使用Javascript:

$('#agreement').scroll(function () {
    if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {            
        $('#closeBtn').removeAttr('disabled');
    }
});

至于更清晰的画面.我在这里把代码放在js中:http://jsfiddle.net/h3WDq/1129/

这是@ BG101的更新版本.滚动到底部时按钮启用,但即使再次单击模态按钮也会保持启用状态.http://jsfiddle.net/h3WDq/1132/

Answer 1

您modal-body需要滚动事件，并且需要对以下内容稍作更改if：-

$('.modal-body').scroll(function () {
    if ($('#agreement').height() == ($(this).scrollTop() + $(this).height())) {         
        $('#closeBtn').removeAttr('disabled');
    }
});

下面的工作片段（更新为打开/关闭）

$('.modal-body').scroll(function () {
    if ($('#agreement').height() == ($(this).scrollTop() + $(this).height())) {         
        $('#closeBtn').removeAttr('disabled');
    }
});

$('.modal-body').scroll(function() {
  var disable = $('#agreement').height() != ($(this).scrollTop() + $(this).height());
  $('#closeBtn').prop('disabled', disable);
});

.btn-group {
  z-index: 1051;
}
.modal-body {
  height: 300px;
  overflow: auto
}