gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 05:29:13 27 4
gpt4 key购买 nike

我想强制用户阅读模式内的所有协议(protocol)。这个想法很简单,如果他们不滚动到文本的最后一行。该按钮仍然禁用。但是该按钮未启用。这是我的代码:

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>

关于javascript - 将引导模式滚动到底部时启用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35008823/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com