JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<script src="https://cdn.shopify.com/s/files/1/0283/0798/0341/t/8/assets/stick-to-me.js"></script>

<div id="stickLayer" style="display:none;" class="stick_popup">
  <div class="stick_close" onclick="$.stick_close()">X</div>
  <div class="stick_content">


<div id="modal-form">   
    <form id="modal-form1" method="post">
        <h2>Werde Teil der bonmedico Community & erhalte 15 % auf Deinen ersten Einkauf!
    </h2>
        <div id="modal-form-inputs">
            <input type="email" name="EMAIL" id="mce-EMAIL" value="" placeholder="Email" class="mce-text-field" required>
            <input type="text" name="FNAME" id="mce-FNAME" value="" placeholder="First name" class="mce-text-field" required>
            <input type="text" name="LNAME" id="mce-LNAME" value="" placeholder="Last name" class="mce-text-field" required>

            <label for="mce-NEWSLETTER"><input type="checkbox" value="1" name="NEWSLETTER" id="mce-NEWSLETTER" required> Ich stimme zu, Benachrichtigungen von bonmedico zu erhalten. Ich habe die <a href="https://bonmedico.com/pages/datenschutz" target="_blank">Datenschutzerklärung</a> gelesen</label>
        </div>

        <!-- honeypot -->
        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" id="js-validate-robot" name="b_a4752870f583bb49a02427b3c_143fa46c21" tabindex="-1" value=""></div>

        <!-- submit -->
        <input type="submit" name="subscribe" id="mc-embedded-subscribe">

        <!-- response -->
        <p id="js-subscribe-response"></p>
  </form>
  </div>  


  </div>
</div>

<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>

CSS

.stick_block_layer {
	background-color: #6BAAD9;
	opacity: 0.3;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

.stick_popup {
	/*height: 200px;*/
	width: 30%;
    top: 25%;
    right: 35%;
    position: fixed;
    z-index: 9999;
  	border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(50,50,50,0.5);
	-moz-box-shadow: 0px 0px 15px rgba(50,50,50,0.5);
	-webkit-box-shadow: 0px 0px 15px rgba(50,50,50,0.5);
	background: #f2f2f2;
	-webkit-animation: zoomin 0.7s;
	animation: zoomin 0.7s;
}


@media screen and (max-width: 640px) {
  .stick_popup {
       right: 0 !important;
        width: 100% !important;
  }
}

.stick_content {
	padding: 20px;
}

.stick_close {
	cursor: pointer;
	position: relative;
	top: 0px;
	left: 0px;
	float: right;
	font-family: Arial;
	font-size: 17px;
	background-color: #d1d1d1;
	color: #4c4c4c;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: none;
}

/* 
CSS3 animation keyframes.
*/
@-webkit-keyframes zoomin {

	0% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
		opacity: 0;
	}

	50% {
		-webkit-transform: scale(1.04);
		-ms-transform: scale(1.04);
		transform: scale(1.04);
		opacity: 1;
	}
  
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}
@-ms-keyframes zoomin {

	0% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
		opacity: 0;
	}

	50% {
		-webkit-transform: scale(1.04);
		-ms-transform: scale(1.04);
		transform: scale(1.04);
		opacity: 1;
	}
  
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
	
}
@keyframes zoomin {

	0% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
		opacity: 0;
	}

	50% {
		-webkit-transform: scale(1.04);
		-ms-transform: scale(1.04);
		transform:...

JavaScript

/*
 * Mailchimp AJAX form submit VanillaJS
 * Vanilla JS
 * Author: Michiel Vandewalle
 * Github author: https://github.com/michiel-vandewalle
 * Github project: https://github.com/michiel-vandewalle/Mailchimp-AJAX-form-submit-vanillaJS
 */

(function () {
    document.getElementById('modal-form1')[0].addEventListener('submit', function (e) {
        e.preventDefault();
alert('ss');
        // Check for spam
        if(document.getElementById('js-validate-robot').value !== '') { return false }

        // Get url for mailchimp
        var url = 'https://facebook.us14.list-manage.com/subscribe/post-json?u=db40c343b16b0af0b777d7db4&id=2631affdd7&c=callback'

        // Add form data to object
        var data = '';
        var inputs = this.querySelectorAll('#modal-form-inputs input');
        for (var i = 0; i < inputs.length; i++) {
            data += '&' + inputs[i].name + '=' + encodeURIComponent(inputs[i].value);
        }

        // Create & add post script to the DOM
        var script = document.createElement('script');
        script.src = url + data;
        document.body.appendChild(script);

        // Callback function
        var callback = 'callback';
        window[callback] = function(data) {

            // Remove post script from the DOM
            delete window[callback];
            document.body.removeChild(script);

            // Display response message
            document.getElementById('js-subscribe-response').innerHTML = data.msg
						
            if (data.result == 'success') {
              alert ('success');
            }	
        };
    });
})();



$.noConflict();
 $.stickToMe({
  layer: '#stickLayer',
  fadespeed: 400,
  trigger: ['top'],
  maxtime : 0,
  mintime : 0,
  delay: 0,
  interval: 0,
  maxamount : 1,
	cookie : false,
  bgclickclose : true,
  escclose : true,
  onleave : function (e) {},
  disableleftscroll : true  // chrome disable   
});