how to trigger click function for modal

Question

I'm trying to trigger a link click when the user reaches the bottom of the page yet not successful. when the users reach the bottom, an alert gets successfully fired however trigger to click the signup link doesn't get fired. What am I missing?

   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>

I have also tried this $('#signupbtn').trigger('click'); yet didnt work

Answer 1

You're using the wrong condition to detect if scroll reached the bottom page. You can use: $(window).scrollTop() + $(window).height() > $(document).height() - 1 && num == 0 or the following answer. Note that I add -1 since the linked answer wasn't working for me in 1920x1080.

For click trigger #signupbtn would work fine.

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

To open the modal, use the native code from 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

Just try

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

Or

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