How to show popup when a user scrolls and reaches the bottom of page or content?

How to show popup when a user scrolls and reaches the bottom of page or content?

Wed, 08/24/2016 - 18:34
Posted in:
6 comments

In this article, we’re going to show modal which is triggered (scroll position trigger) when a user scrolls and reaches the 

First, I’ll explain you that how is it useful to show popup when a user scrolls at end of page or content.

What are benefits end page notification?

Consider a user is reading an excellent article on your website. He finished reading your article and ready to flee away. In this condition Scroll Position Behaviour gets triggered. In response to that a popup shows up with a subscription form or realated article link. If user liked your current content then he will most likely subscribe to the newsletter or he can click next linked article. It increases bounce rate and you get a loyal user who reads and like your content regularly. It seems very great idea! isn't it?

So let's get started -

Show popup when user reaches end of webpage.

View Demo     Download Source

In this method, I have added code for popup which will be shown at end of web page. Some websites don't have large sized (height-wise) footers. So it is better to them to show popup at end of page as a user eventually reaches the end of the page while scrolling.

HTML code

Following modal code should be added in your web page. The structure of the modal consists of a main wrapper (id: bounceModal) and a content division (class: ffb-content):

<div class="ffb-modal ffb-effect" id="bounceModal">
<div class="ffb-content">
   <h3>Modal Dialog</h3>
    <div>
     <!-- Modal content goes here -->
      <button class="ffb-close">Close me!</button>
    </div>
  </div>
</div>
<!-- modal code end -->
<div class="container">
<!-- Page content goes here -->
</div>
<!-- /container -->
<div class="ffb-overlay"></div>

The main wrapper is used as a container that will simply be shown or hidden (with visibility, using the class “ffb-show”) and the inner content will have the css effect. Note that the overlay (class: ffb-overlay) is placed after the modal and page content, so we can control the blur appearance using the adjacent sibling selector.

CSS code

When page loads modal visibility is hidden and it's position is fixed.

.ffb-modal {
position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 630px;
  min-width: 320px;
  height: auto;
  z-index: 2000;
  visibility: hidden;
  backface-visibility: hidden;
  transform: translateX(-50%) translateY(-50%);
}
.ffb-show {
  visibility: visible;
}
.ffb-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  background: rgba(143, 27, 15, 0.8);
  transition: all 0.3s;
}
.ffb-show ~ .ffb-overlay {
  opacity: 1;
  visibility: visible;
}

I have used scale effect CSS3 for modal on appearance. According to me CSS transition effects are smooth as compared to jquery effects. When popup shows, page background will become blur thanks to overlay that we have used in HTML code. The following code is used for transition effect and blur background.

/* Blur background */
.ffb-show.ffb-effect ~ .ffb-overlay {
  background: rgba(78, 46, 32, 0.5);
}
.ffb-show.ffb-effect ~ .container {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  filter: blur(3px);
}
/* Effect: Super Scale */
.ffb-effect .ffb-content {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.ffb-show.ffb-effect .ffb-content {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
Browser Compatability

Please note: This only works as intended in browsers that support the respective CSS properties. Modern browsers only! There are some knows issue with using visibility and opacity for old iOS Safari browsers, so this transition probably won't work.

Solution: You can use jquery animations in jquery code removing this transition CSS code.

or instead of CSS3 effect: fade in and scale up use display property for hide and show like this -

.ffb-effect .ffb-content {
display: none;
}
.ffb-show.ffb-effect .ffb-content {
display: block;
}

jQuery Code

Make sure to include jQuery library before this custom js code.

$(function() {
  var triggered_times = 0;
  $(window).scroll(function() {
    if ($('body').height() <= ($(window).height() + $(window).scrollTop()) && triggered_times == 0) {
      $('#bounceModal').addClass("ffb-show");
      triggered_times = 1;
    }
  });
  // Closing the Popup Box
  $(".ffb-close").click(function() {
    $("#bounceModal").removeClass("ffb-show");
  });
}); 

I have used a variable triggered_times which ensure that popup shows only once at each page load. You also can use the jQuery cookie instead of that variable if you do not want to show popup again for certain time period. A cookie is used in an example of exit intent popup tutorial.

If you want to close popup when a click is detected anywhere outside of modal then add following jquery code below above jquery script.

// If clicked anywhere on body
$("body").click(function(){
$("#bounceModal").removeClass("ffb-show");
});
// Prevent event if clicked on #bounceModal
$("#bounceModal").click(function(e){
e.stopPropagation();
});

Show popup when user reaches end of content.

View Demo     Download Source

Some people might not like an idea of full page scroll popup. They might want popup at end of their content or somewhere below or up. For those In HTML page, you have to add this line of HTML code at end of content.

HTML Code

Include same popup code is shown in the first method.

Also, add following line below your content so when a user scrolls up to this div popup message will be shown to him. 

<div id = "theTarget"></div> <!-- Popup modal trigger div -->

If you do not know how to add HTML line in your content. Then you have to learn some basic concepts of HTML with your editor in a website. If you are using the template for your website then you can add this line below the line of content print.

CSS code will be same as the first method.

jQuery Code

$(function() {
var triggered_times = 0;
  $(window).scroll(function() {
  var distanceTop = $('#theTarget').offset().top - $(window).height();
    if ($(window).scrollTop() > distanceTop && triggered_times == 0) {
    $('#bounceModal').addClass("ffb-show");
      triggered_times = 1;
    }
});
  // Closing the Popup Box
  $(".ffb-close").click(function() {
  $("#bounceModal").removeClass("ffb-show");
  });
});  

triggered_times variable used to show popup only once per page load. You can add cookie functionality. jQuery function isScrolledIntoView checks if target div is hit during scroll of a user. It returns true when a user reaches the target div on the page.

What if I am using Bootstrap Framework in my template?

For bootstrap, you have to remove HTML popup code with bootstrap popup code. Also, there is no need to include additional CSS.

HTML code

<div class="modal fade" id="bounceModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"><!-- your content title here --></h4>
      </div>
      <div class="modal-body">
        <p><!-- your content body here --></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>      
  </div>
</div>

In jQuery code you have to change

$('#bounceModal').addClass("ffb-show");

to

$('#bounceModal').modal();

and remove close action function.

 

Done! That's it. Will work like a charm in the bootstrap template.

This Scroll Position Trigger method is very useful in Mobiles and tablets as these devices do not have mouse cursor movements to decide exit intent of user. Enjoy scroll position popup modal on your website and improve user interaction.

Please note: on August 23 - 2016, Google announced that Google search is going to punish ranking of mobile pages that show intrusive interstitials (Disturbing Popups or notifications).

If you want to know more about be user actions to improve conversion rate check on

List of user actions (Behaviour Triggers) to show popups/notifications

Comments

Great tutorial. Now all you need is tutorial for a cookie script that will check if the user has seen the popup so it wont fire again on other pages.

My old company once hired a company to complete the SEO and within a month or two our website had lost a lot of the rankings, did I pick a bad SEO'er?

Submitted by Sarbjit on Wed, 04/12/2017 - 15:11 Permalink

Thanks for sharing great post. Is there a way I can only show popup 1-2 times or don't show popup once user signed up / subscribed to my newsletter form? because right now form will show up everytime page reloads.

As added in an example with help of cookies you can show popup once or twice in a day or particular time frame.

If you do not want to show popups for signed up/subscribed users then you need to add condition checking user is not signed up or subscribed. 

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
The content of this field is kept private and will not be shown publicly.