我试图在用户到达页面底部但未成功时触发链接点击。当用户到达底部时,将成功触发警报,但不会触发单击注册链接的触发器。我错过了什么?
var num = 0 ;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height() && num ==0)
{alert("bottom reached!");
num = 1
$('#signupbtn a').trigger('click');
}
});
#bottom{
position: absolute;
top: 1000px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<a class="button button-sm button-shadow" id="signupbtn" data-toggle="modal" data-target=".bs-example-modal-new" href="#">Sign Up</a>
<div class="wrap">
</div>
<div class="modal fade bs-example-modal-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal Content: begins -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="body-message">
<input placeholder="Email" style="width: 258px; height: 48px; margin: 100"><a class="button button-secondary button-shadow" href="#">send me </a>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal Content: ends -->
</div>
</div>
<div id="bottom">Bottom</div>
最佳答案
要打开模式,请使用来自 Bootstrap 3 documentation 的 native 代码
$('.modal').modal('show');
var num = 0;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() == $(document).height() && num == 0)
{
alert("bottom reached!");
num = 1
$('.modal').modal('show');
}
});
#bottom {
position: absolute;
top: 1000px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<a class="button button-sm button-shadow" id="signupbtn" data-toggle="modal" data-target=".bs-example-modal-new" href="#">Sign Up</a>
<div class="wrap">
</div>
<div class="modal fade bs-example-modal-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal Content: begins -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="body-message">
<input placeholder="Email" style="width: 258px; height: 48px; margin: 100"><a class="button button-secondary button-shadow" href="#">send me </a>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal Content: ends -->
</div>
</div>
<div id="bottom">Bottom</div>
关于javascript - 如何触发模态的点击功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55998216/