Subscribe pop up alert box on scroll down and onload using subscribe better js

Today i'm going to Create a better, highly customizable subscription modal or newsletter signup window with jQuery Subscribe Better, this is really flexible modal lightbox pop up window and it has more features, most of them using this kind alert pop up window to e commerce, real estate site and more different sites, and this alert box comes when we are scroll down and scroll up. let see the coding and explanation. 

DOWNLOAD                 LIVE DEMO 1              LIVE DEMO 2

JS and CSS FILES

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.subscribe-better.js"></script>
<link href='css/subscribe-better.css' rel='stylesheet' type='text/css'>
<link href='css/style.css' rel='stylesheet' type='text/css'>
<script>
  $(document).ready(function(){
  $(".subscribe-me").subscribeBetter({
        animation: "flyInLeft", // fade | flyInRight | flyInLeft | flyInUp | flyInDown
        autoClose: true,
        delay: 1000,
        showOnce: false
    });
  });
</script>

DEFAULTS

var defaults = {
    trigger: "atendpage", // atendpage | onload | onidle
    animation: "fade", // fade | flyInRight | flyInLeft | flyInUp | flyInDown
    delay: 0,
    showOnce: true,
    autoClose: false,
    scrollableModal: false
    };

we can use the above all functions as we need, we can make this in onload function by using that trigger:"onload", display the pop up alert box.

HTML

<div class="wrapper">
<div class="main">
  <div class="subscribe-me">
    <h2>Subscribe our Newsletter</h2>
    <a href="#close" class="sb-close-btn">X</a>
    <p>Subscribe to our mailing list to get updates to your email inbox</p>
    <form action="" method="post" name="formname" >
      <input type="email" name="email" placeholder="Enter your correct email Id"/>
      <input type="submit" value="Submit" />
    </form>
  </div>
  <div class="container">
   
  <!--             contents all comes here...                 -->
  
  </div>
</div>
</div>

CSS

@charset "utf-8";
/* CSS Document */

html {
    height: 100%;
}
body {
    padding: 0;
    text-align: center;
    font-family:Tahoma, Geneva, sans-serif;
    position: relative;
    margin: 0;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
}
a {
    color: black;
}
.wrapper {
    height: auto !important;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}
h1 {
    margin-top: 100px;
    color: #fff;
    margin-bottom: 5px;
    font-size: 70px;
    font-weight: 100;
}
h2 {
    padding: 00px 20px 30px 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    letter-spacing: 0px;
    color: #fff;
    font-size: 20px;
    line-height: 160%;
    font-weight: 100;
    margin-top: 10px;
    margin-bottom: 0;
}
body .main .pointer {
    color: #fff;
    font-family: 'Pacifico';
    font-size: 37px;
    margin-top: 0;
    padding: 0 0 15px 0;
    text-align: center;
    text-transform: lowercase;
}
.main h1 {
    padding:20px 50px 10px;
    float: left;
    width: 100%;
    font-size: 60px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-weight: 100;
    margin: 0;
    padding-top: 25px;
    font-family: 'Open Sans';
    letter-spacing: -1px;
    text-transform: capitalize;
}
.container {
    width: 980px;
    margin: 0 auto;
    overflow: hidden;
}
.subscribe-me h2 {
    color: #E73E41;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 29px;
}
body .sb form input[type='submit'] {
    background: #E73E41;
}

I hope this post is really helpful to you, keep supporting me, subscribe to get in touch with email for all my latest update. Thank you.

RELATED POSTS :

Step By Step Take Tour process using intro.js

Simple form validation using validate.js with jquery

Menu to Drop down menu while Resize the browser

Gird and List style view onclick by using Jquery

Set current time using javascript for websites

Portfolio Design and sorting with Animation Effect

Web camera snap using snap.js Jquery