Enable button when scrolling boot modal to lower

Question

I want to make the user read the entire convention inside the modal. The idea is simple if they do not scroll to the last line of text. The button is still disabled. But the button is not turned on. This is my code:

JavaScript:

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

As for a sharper image. I put the code in js here: http://jsfiddle.net/h3WDq/1129/

This is the update version from @ BG101. The button turns on when I scroll to the bottom, but it even lets you turn on the modal click button. http://jsfiddle.net/h3WDq/1132/

Answer 1

your modal-body requires a scroll event, and you need a little change in if : -

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

working snippet below (updated to enable / disable)

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

Answer 2

Why not place the hidden element at the bottom of the agreement and not detect when the offset of this element scrolls up?

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

Answer 3

#terms-page is the identifier of a 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'); } });