Aktivieren Sie die Schaltfläche beim Scrollen Bootstrap modal nach unten

Question

Ich möchte den Benutzer zwingen, alle die Vereinbarung innerhalb des Modal zu lesen. Die Idee ist einfach, wenn sie nicht bis zur letzten Zeile des Textes scrollen. Die Schaltfläche ist weiterhin deaktiviert. Aber die Schaltfläche ist nicht aktiviert. Dies ist mein Code:

Javascript:

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

Was das Bild klarer. Ich habe den Code in js hier: http://jsfiddle.net/h3WDq/1129/

Dies ist eine Update-Version von @ BG101. Die Schaltfläche aktivieren, wenn ich nach unten scrollen, aber es bleibt aktiviert, selbst die modale Schaltfläche ist wieder klicken. http://jsfiddle.net/h3WDq/1132/

Answer 1

Ihr modal-body brauchen das Scroll-Ereignis, und Sie müssen eine kleine Änderung an den if: -

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

Arbeits Schnipsel unten (aktualisiert ein-/ausschalten)

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

Warum nicht ein verstecktes Element am Ende der Vereinbarung platzieren und erkennen, wenn der Offset dieses Elements nach oben gescrollt wird?

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