Skip to content

Instantly share code, notes, and snippets.

@Moollihawkja
Created July 14, 2015 04:54
Show Gist options
  • Save Moollihawkja/80be0d8cca28db5a8bc1 to your computer and use it in GitHub Desktop.
Save Moollihawkja/80be0d8cca28db5a8bc1 to your computer and use it in GitHub Desktop.
Creating a pop up in pure javascript
<!DOCTYPE html>
<html>
<head>
<style>
.popup {
position: fixed;
top: 50vh;
left: 50%;
width:400px;
margin-left: -200px;
margin-top: -150px;
text-align: center;
background-color:white;
border:2px solid #222;
border-radius: 15px;
-moz-box-shadow: 0 0 20px #000000;
-webkit-box-shadow: 0 0 20px #000000;
box-shadow: 0 0 20px #000000;
}
.popup button {
margin-top:10px;
margin-bottom:20px;
font-size:larger;
width:200px;
padding: 12px 15px;
border: none;
background: #1fb25a;
color: #222222;
text-shadow: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
cursor:pointer;
}
.popup button:hover {
background: #aaa;
}
.popup input {
width:300px;
font-size:larger;
}
.popup a {
margin-left:30px;
font-size:smaller;
}
</style>
</head>
<body>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var
$body = document.querySelector("body"),
popup = {
html: "<div class='popup'><h1>{{title}}</h1><h2>{{message}}</h2><div><input name='email' placeholder='Your e-mail address'/</div><div><button>Sign Up</button> <a href='#'>Close</a></div></div>",
message: "Enter your message here!",
title: "Your TITLE"
};
setTimeout(function() {
var popupdiv=document.createElement("div");
popup_html = popup.html
for (var key in popup) {
popup_html = popup_html.replace("{{" + key + "}}", popup[key])
}
popupdiv.innerHTML = popup_html;
popupdiv.id = "popup"
$body.appendChild(popupdiv);
var $popup = document.querySelector("#popup"),
$popupButton = $popup.querySelector("button"),
$popupInput = $popup.querySelector("input"),
$popupClose = $popup.querySelector("a");
$popupButton.onclick = function() {
v = $popupInput.value;
if (isNotValid(v)) {
$popupInput.style.backgroundColor = "#ffdddd"
return
}
$popup.style.display = 'none'
}
$popupClose.onclick = function() {
$popup.style.display = 'none'
}
function isNotValid(v) {
return (v.length == 0 || v.indexOf("@") > v.indexOf(".") || v.indexOf(".") < 0 || v.indexOf("@") < 0)
}
}, 500)
});
</script>
</body>
</html>
@Moollihawkja
Copy link
Author

A popup widget that can be added to any page in pure javascript (without any third party javascript libraries like jQuery)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment