nestscript.js

(function( $ ) {

  function getStyles(selector) {
    return selector+" .modal-dialog {margin-top: 15%;}" +selector+" .modal-dialog .modal-content {border: 1px solid black; border-radius: 0;}" +selector+" .modal-dialog .modal-content .modal-header {padding: 22px;} "+selector+" .modal-dialog .modal-content .close {color: white; background: black;opacity: 1;padding: 3px; margin: -22px;} "+selector+" .modal-dialog .modal-content input.form-control { padding: 19px 10px; display:block; border: 1px solid black; border-radius: 0; width:100%; } @media (min-width: 768px) {.modal-dialog { width: 550px;margin: 30px auto;} } input[type='text'] {box-sizing: border-box;} .input-block-level {display: block;width: 100%; min-height: 28px; } input.form-control {box-sizing:border-box !important;} " +selector+" .modal-dialog .modal-content .modal-body {position: relative; padding: 0 10% 10%;}" +selector+" .modal-dialog .modal-content .btn {padding:9px 12px; font-size:12px; text-transform: none;}" +selector+" .modal-dialog .modal-content .btn.btn-primary { background-color: white;color: black;border: 1px solid black;}  .btn {border-radius:0!important;}" +selector+" .modal-dialog .modal-content .modal-header {border-bottom:0 none;}";
  }

  var inject_css = function(selector) {
    var css, meta, selector, style;
    selector = selector;
    css = getStyles(selector);
    style = document.createElement("style");
    style.type = "text/css";
    if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
    document.head.appendChild(style);
  }

  //nestdallas.us7.list-manage.com/subscribe/post?u=7d3dff33dc77c13058bdd8117&id=6243249902

  var innerHTMLModal =
    '<div class="modal-dialog">' +
      '<div class="modal-content">' +
        '<div class="modal-header">' +  
          '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
          '<img class="img-responsive" src="http://www.nestdallas.com/product_images/uploaded_images/10percoff.png">' +
        '</div>' +
        '<div class="modal-body">' +
          '<form id="mailchimp-nest-register" name="mc-embedded-subscribe-form" action="//nestdallas.us7.list-manage.com/subscribe/post-json?u=7d3dff33dc77c13058bdd8117&id=6243249902&c=?" method="get" class="form-inline form-horizontal" novalidate>'+
            '<div class="row">' +
              '<div class="col-sm-6">' +
                '<input class="input hidden" type="text" value="FirstNameNestPopupSignup" name="MERGE1" placeholder="First Name" required>'+
                '<input type="email" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Enter Email">' +
                '<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--><div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_7d3dff33dc77c13058bdd8117_6243249902" tabindex="-1" value=""></div>' +
              '</div>' +
              '<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_7d3dff33dc77c13058bdd8117_6243249902" tabindex="-1" value=""></div>' +
              '<input type="submit" class="btn btn-default" value="Sign Me Up" name="subscribe">' +
              '<button type="close" data-dismiss="modal" aria-label="Close" class="btn btn-primary" style="margin-left: 2%;">No Thanks</button>' +
            '</div>' +
          '</form>' +
        '</div>' +
      '</div><!-- /.modal-content -->' +
    '</div><!-- /.modal-dialog -->';
  $( '<div/>' ,{
      'class': 'modal fade modal-popup-nest',
      'role': 'dialog',
      'html': innerHTMLModal
  }).appendTo('#Container').modal();

  inject_css('.modal-popup-nest');

  function register_mc($form) {
    $.ajax({
      type: $form.attr('method'),
      url: $form.attr('action'),
      data: $form.serialize(),
      cache       : false,
      dataType    : 'jsonp',
      jsonp       : 'c',
      contentType: "application/json; charset=utf-8",
      error       : function(err) { alert("Could not connect to the registration server. Please try again later."); },
      success     : function(data) {
        console.log(data);
        console.log($form.serialize());
          if (data.result != "success") {
            var replaceHtml = '<strong class="text-danger">' + data.msg + '.</strong>';
            $form.append(replaceHtml);
              // Something went wrong, do something to notify the user. maybe alert(data.msg);
          } else {
            var replaceHtml = '<p class="has-success">' + data.msg + '</p>';
            $form.replaceWith(replaceHtml);
          }
      }
    });
  }
  var $form = $('#mailchimp-nest-register');


  if ( $form.length > 0 ) {

    $form.submit(function (event) {
            // I only have one form on the page but you can be more specific if need be.
       
        console.log($form);
        console.log($form.serialize());

        if ( event ) event.preventDefault();
        // validate_input() is a validation function I wrote, you'll have to substitute this with your own.
        if (validateEmail($('#mce-EMAIL').val()) !== false) {
          register_mc($form);
        } else {
          $form.append('<strong class="text-danger">Please enter a valid email address.</strong>');
        }
    });
  }

  function validateEmail(value) {
    var x = value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
        return false;
    }
  }   
}( jQuery ));