Enable button when scroll bootstrap modal to bottom

问题

I want to force the user to read all the agreement inside the modal. The idea is simple, if they don't scroll to the last line of the text. The button still disable. But the button is not enable. This is my code:

Javascript:

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

As for the clearer picture. I put the code in js here : http://jsfiddle.net/h3WDq/1129/

This is an update version from @BG101. The button enable when I scroll to the bottom but it keeps enable even the modal button is click again. http://jsfiddle.net/h3WDq/1132/

回答1:

your modal-body need the scroll event, and you need a small change to the if:-

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

working snippet below (updated to toggle on/off)

$('.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>

回答2:

Why not put a hidden element at the bottom of the agreement and detect when the offset of that element is scrolled to the top?

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

回答3:

#terms-page - is the ID of the particular div

You can try the following:

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

来源：https://stackoverflow.com/questions/35008823/enable-button-when-scroll-bootstrap-modal-to-bottom

标签

javascript

jquery

bootstrap-modal