JSFiddle - React, Tailwind, and code Playground
HTML
<form id="form" action="/" method="post" name="form" target="_blank">
<h3><span>Subscribe to Newsletter</span></h3>
<p class="email_first">
<label for="email">Your Email</label>
<input id="EMAIL" class="email" type="email" name="EMAIL"
value="Your Email Address:" size="30" />
</p>
<p class="submit">
<button type="submit">Send</button>
</p>
</form>
JavaScript
window.onload = function () {
var bindEvent = function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
element.attachEvent('on' + type, handler);
}
};
var popUp = function () {
var popup = document.createElement('div');
popup.className = 'popup';
popup.id = 'test';
var cancel = document.createElement('div');
cancel.className = 'cancel';
cancel.innerHTML = 'close';
cancel.onclick = function (e) {
popup.parentNode.removeChild(popup)
};
var message = document.createElement('span');
message.innerHTML = "This is a test message";
popup.appendChild(message);
popup.appendChild(cancel);
document.body.appendChild(popup);
};
bindEvent(document.getElementById("form"), "submit", popUp);
}