将引导模式滚动到底部时的启用按钮

Enable button when scroll bootstrap modal to bottom

本文关键字：启用 按钮 底部 模式 滚动      更新时间：2023-09-26

我想强制用户阅读模态内的所有协议。这个想法很简单，如果他们不滚动到文本的最后一行。按钮仍处于禁用状态。但该按钮未启用。这是我的代码：

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/

>您的modal-body需要滚动事件，并且您需要对if进行小的更改：-

$('.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
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <h3>User Agreement</h3>
  <!-- Button to trigger modal -->
  <div>
    <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
  </div>
  <!-- Modal -->
  <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>User Agreement</h3>
    </div>
    <div class="modal-body">
      <div id="agreement" style="height:1000px;">
        A very long agreement
      </div>
    </div>
    <div class="modal-footer">
      <button id="closeBtn" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" disabled>I Accept</button>
    </div>
  </div>
</div>

#terms-page - 是特定div的 ID

您可以尝试以下操作：

$("#terms-page").scroll(function () {
    var ele = document.getElementById('terms-page');
    if (ele.scrollHeight - ele.scrollTop === ele.clientHeight)
    {
        $('#closeBtn').removeAttr('disabled');
    }
});

为什么不在协议的底部放置一个隐藏元素，并检测该元素的偏移量何时滚动到顶部？

$('#agreement').scroll(function () {
    var target = $("#target").offset().top;
    if ($(this).scrollTop() >= target) {
        $('#closeBtn').removeAttr('disabled');
    } 
});

从div 中删除高度并粘贴以下代码，它将超级工作

$('.modal-body').scroll(function() {
   var height = $('#agreement').height();
   console.log(height);
   var scroll = $(this).scrollTop() + $(this).height();
   console.log(scroll);
   if (height>scroll) {
     $('#closeBtn').prop('disabled', true);
   } else {
     $('#closeBtn').prop('disabled', false);
   }
});
相关文章：