Skip to content

Instantly share code, notes, and snippets.

@jamesona

jamesona/demo.html

Last active November 10, 2016 21:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamesona/faaea3f54eb9cd2c83595e029d12b5b7 to your computer and use it in GitHub Desktop.
Save jamesona/faaea3f54eb9cd2c83595e029d12b5b7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
demo.html
<html>
<head>
<style>
.modal-container {
background: rgba(0,0,0,0.5);
display: block;
height: 100vh;
position: absolute;
left: 0;
top: 0;
width: 100vw;
z-index: 1000;
}
.modal-container .modal {
display: block;
text-align: center;
box-shadow: 0 1rem 3rem #333;
background: #fff;
margin: 10rem auto;
width: 50%;
position: relative;
}
.modal .head, .modal .foot {
min-height: 5rem;
width: 100%;
}
.modal .head h4 {
margin: 0;
font-size: 2rem;
line-height: 1;
padding: 1rem 0 0;
}
.close {
background: #fff;
border-radius: 50%;
border: 2px solid;
box-shadow: 0 0 5px #333;
display: block;
line-height: 2rem;
height: 2rem;
width: 2rem;
right: -1rem;
top: -1rem;
position: absolute;
text-align: center;
vertical-align: middle;
transition: all 0.8s ease;
}
.close:hover {
background: currentColor;
-webkit-text-fill-color: white;
transition: all 0.3s ease;
}
</style>
<script>
var request = function(){
var url = 'http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/check.php',
xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function(){
if(xhr.readystate === XMLHttpRequest.DONE && xhr.status === 200){
// whatever you want to do afterward
}
};
xhr.send(
'userName=' + document.querySelector('#username').value + '&' +
'password=' + document.querySelector('#password').value
);
}
document.querySelector('#submitButton').onclick = request;
</script>
</head>
<body>
<div class="modal-container">
<div class="modal">
<div clas="head"><h4>You win!!!</h4></div>
<div class="body"><input id="username" placeholder="username"/><input id="password" type="password" placeholder="password"></div>
<div class="foot"><button id="submitButton">send</button></div>
</div>
</div>
</body>
</html>
Raw
gistfile1.txt
<html>
<head>
<style>
.modal-container {
background: rgba(0,0,0,0.5);
display: block;
height: 100vh;
position: absolute;
left: 0;
top: 0;
width: 100vw;
z-index: 1000;
}
.modal-container .modal {
display: block;
text-align: center;
box-shadow: 0 1rem 3rem #333;
background: #fff;
margin: 10rem auto;
width: 50%;
position: relative;
}
.modal .head, .modal .foot {
min-height: 5rem;
width: 100%;
}
.modal .head h4 {
margin: 0;
font-size: 2rem;
line-height: 1;
padding: 1rem 0 0;
}
.close {
background: #fff;
border-radius: 50%;
border: 2px solid;
box-shadow: 0 0 5px #333;
display: block;
line-height: 2rem;
height: 2rem;
width: 2rem;
right: -1rem;
top: -1rem;
position: absolute;
text-align: center;
vertical-align: middle;
transition: all 0.8s ease;
}
.close:hover {
background: currentColor;
-webkit-text-fill-color: white;
transition: all 0.3s ease;
}
</style>
</head>
<body>
<div class="modal-container">
<div class="modal">
<div clas="head"><h4>You win!!!</h4></div>
<div class="body"><p>Some other content here, or something.</p></div>
<div class="foot"><button>Tadaaaa</button></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment