JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<form action='#' id="my-form">
    <input type='text' name='asdf' />
    <input type='submit' name='jkl' value='Submit' />
</form>
<div id="alertBox">
    <div id="alertContent">asdf</div>
    <button id="alertOK">OK</button>
</div>

CSS

#alertBox {
    display:none;
    background: grey none repeat scroll 0 0;
    left: 50%;
    margin-left: -275px;
    position: fixed;
    text-align: center;
    width: 550px;
    z-index: 10;
}

JavaScript

document.getElementById('my-form').onsubmit = function () {
    displayAlert("asdf");
    return false;
}

function displayAlert(msg) {
    document.getElementById('alertContent').innerHTML = msg;
    document.getElementById('alertBox').style.display = "block";
    document.getElementById('alertOK').onclick = function () {
        document.getElementById('alertBox').style.display = "none";
    };
}