MailChimp Popup For Shopify Themes

MailChimp Popup For Shopify Themes

HTML

<link rel="stylesheet" href="href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css">
<script src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
<div id="CoverPop-cover" class="splash CoverPop-close">
    <div id="CoverPop-content" class="splash-center">
        <form action="//drapedsun.us2.list-manage.com/subscribe/post-json?u=35643006752ddfc371c8aff8b&amp;id=08641810e4" method="get" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate />
        <input type="text" value="" name="FNAME" id="newsletter-first-name" placeholder="First Name" />
        <input type="email" value="" name="EMAIL" id="contact_email" placeholder="your@email" />
        <div style="position: absolute; left: -5000px;">
            <input type="text" name="b_08eeb9579fc9a88b8fd255434_a659b1cd0d" tabindex="-1" value="" />
        </div>
        <input type="submit" value="Subscribe" name="subscribe" id="subscribe" class="button" />
        </form>
        <p class="close-splash"><a class="CoverPop-close" href="#">Close</a>
        </p>
    </div>
    <!--end .splash-center -->
</div>
<!--end .splash -->

CSS

/********* Popup Styling *********/
 .CoverPop-open, .CoverPop-open body {
    overflow: hidden;
}
#CoverPop-cover {
    display: none;
    position: fixed;
    overflow-y: scroll;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    -webkit-animation: fade-in .25s ease-in;
    -moz-animation-name: fade-in .25s ease-in;
    -ms-animation-name: fade-in .25s ease-in;
    -o-animation-name: fade-in .25s ease-in;
    animation-name: fade-in .25s ease-in;
}
.CoverPop-open #CoverPop-cover {
    display: block;
}
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.splash {
    background-color: rgb(42, 86, 186);
    background-color: rgba(42, 86, 186, 0.95);
}
.splash-center {
    text-align: center;
    max-width: 420px;
    padding: 20px;
    background: #fff;
    margin: 10% auto 0;
}
.splash-title {
    margin: 0 0 5px 0;
}
.input-text {
    width: 100%;
    margin-bottom: 5px;
    border: solid 1px #ccc;
    padding: 7px;
}
.submit-button {
    margin-bottom: 10px;
}
.close-splash {
    margin: 0;
    font-size: 12px;
}
@media screen and (max-width: 420px) {
    .splash-center {
        margin: 0;
    }
}

JavaScript

/*!
 * Email Popup 1.0
 *
 * Copyright (c) 2014  Elkfox
 * Licensed under the GNU General Public License as published by the Free Software Foundation: http://opensource.org/licenses/GPL-3.0
 */


(function (CoverPop, undefined) {

    'use strict';

    // set default settings
    var settings = {

        // set default cover id
        coverId: 'CoverPop-cover',

        // duration (in days) before it pops up again
        expires: 30,

        // close if someone clicks an element with this class and prevent default action
        closeClassNoDefault: 'CoverPop-close',

        // close if someone clicks an element with this class and continue default action
        closeClassDefault: 'CoverPop-close-go',

        // change the cookie name
        cookieName: '_CoverPop',

        // on popup open function callback
        onPopUpOpen: null,

        // on popup close function callback
        onPopUpClose: null,

        // hash to append to url to force display of popup
        forceHash: 'splash',

        // hash to append to url to delay popup for 1 day
        delayHash: 'go',

        // close if the user clicks escape
        closeOnEscape: true,

        // set an optional delay (in milliseconds) before showing the popup
        delay: 0
    },


    // grab the elements to be used
    $el = {
        html: document.getElementsByTagName('html')[0],
        cover: document.getElementById(settings.coverId),
        closeClassDefaultEls: document.querySelectorAll('.' + settings.closeClassDefault),
        closeClassNoDefaultEls: document.querySelectorAll('.' + settings.closeClassNoDefault)
    },


    /**
     * Helper methods
     */

    util = {

        hasClass: function (el, name) {
            return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className);
        },

        addClass: function (el, name) {
            if (!util.hasClass(el, name)) {
                el.className += (el.className ? ' ' : '') + name;
            }
        },

...