Włącz przycisk po przewinięciu modala do dołu

Question

Chcę zmusić użytkownika do przeczytania całej umowy wewnątrz modalu. Pomysł jest prosty, jeśli nie przewijają do ostatniej linii tekstu. Przycisk nadal się wyłącza. Ale przycisk nie jest włączony. To jest mój kod:

Javascript:

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

Jak dla jaśniejszego obrazu. Wpisuję kod w js tutaj: http://jsfiddle.net/h3WDq/1129/

To jest wersja aktualizacji z @ BG101. Przycisk włącza się, gdy przewijam do dołu, ale utrzymuje on włączony, nawet przycisk modalny jest ponownie kliknięty. http://jsfiddle.net/h3WDq/1132/

Answer 1

swój modal-body potrzebują zdarzenie przewijania i trzeba niewielką zmianę do if: -

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

fragmencie pracy poniżej (zaktualizowane, aby włączyć/wyłączyć)

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

Dlaczego nie umieścić ukrytego elementu na dole umowy i nie wykryć, kiedy przesunięcie tego elementu jest przewijane na górę?

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