Question

我试图在用户到达页面底部但未成功时触发链接单击。当用户触底时，会成功触发警报，但是不会触发单击注册链接的触发器。我想念什么？

   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">&times;</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>

我也尝试过这个$（'＃signupbtn'）。trigger（'click'）;仍然没有工作

Answer 1

您使用了错误的条件来检测滚动是否到达底部页面。您可以使用： $(window).scrollTop() + $(window).height() > $(document).height() - 1 && num == 0或the following answer。请注意，由于链接的答案在1920x1080中对我不起作用，因此我添加了-1。

对于点击触发器#signupbtn可以正常工作。

var num = 0;
$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() > $(document).height() - 1 && num == 0)

  {
    alert("bottom reached!");
    num = 1



    $('#signupbtn').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">&times;</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>

Answer 2

要打开模式，请使用Bootstrap 3 documentation中的本机代码

$('.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">&times;</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>

Answer 3

只需尝试

$('#signupbtn').trigger('click');

或

$('#signupbtn').click();

如何触发模态点击功能

3 个答案: