Fashion Subscribe Form Modal Box Plugin with jQuery and CSS3 - Subscribe Better

Subscribe Better is a jQuery plugin which allows you to display a fashion newsletter subscription form in a responsive customizable modal box/popup window.

How to use it:

1. Load the jQuery library and the jQuery subscribe better plugin's script and CSS in your web page.

<link href="subscribe-better.css" rel="stylesheet">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.subscribe-better.js"></script>

2. Create a newsletter subscription form as follows.

<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>
    <input type="email" placeholder="Email Address">
    <input type="submit" value="Sign up">
  </form>
</div>

3. Initialize the plugin with default options.

$(document).ready(function(){
$(".subscribe-me").subscribeBetter();
});

4. All the available options to customize the subscribe modal box.

• trigger: "atendpage": You can choose which kind of trigger you want for the subscription modal to appear. Available triggers are "atendpage" which will display when the user scrolls to the bottom of the page, "onload" which will display once the page is loaded, and "onidle" which will display after you've scrolled.
• animation: "fade": You can set the entrance animation here. Available options are "fade", "flyInRight", "flyInLeft", "flyInUp", and "flyInDown". The default value is "fade".
• delay: 0: You can set the delay between the trigger and the appearance of the modal window. This works on all triggers. The value should be in milliseconds. The default value is 0.
• showOnce: true: Toggle this to false if you hate your users. :)
• autoClose: false: Toggle this to true to automatically close the modal window when the user continue to scroll to make it less intrusive. The default value is false.
• scrollableModal: false: If the modal window is long and you need the ability for the form to be scrollable, toggle this to true. The default value is false.

---

This awesome jQuery plugin is developed by peachananr. For more Advanced Usages, please check the demo page or visit the official website.