HTML reset copy

<style> body {font-family: tahoma;} .netmod { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: transparent; } .netmod-content { background-color: #960018; margin: auto; padding: 20px; border: 4px solid red; width: 400px; height: 300px; color: #fff; } .close { color: yellow; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #fff; text-decoration: none; cursor: pointer; } </style> <button id="mybax">Open Message</button> <div id="bax" class="netmod"> <div class="netmod-content"> <span class="close">x</span> <p>Welcome!</p> </div></div>

Js JAVASCRIPT reset copy

var modal = document.getElementById("bax"); var btn = document.getElementById("mybax"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }