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

18 December 2014

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. 

subscribe-alert-box-on-scroll-down-using-subscribe-better-js
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 :







1 comment:

  1. Having read this I believed it was rather enlightening.
    I appreciate you spending some time and effort to put this
    content together. I once again ind myseelf spending a significant amount of time both
    reading and commenting. But sso what, it was still worthwhile!

    ReplyDelete

^