Skip to content

Instantly share code, notes, and snippets.

@ooooak

ooooak/gist:addea0aa1dfd137a81f6

Created July 31, 2015 07:42
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 ooooak/addea0aa1dfd137a81f6 to your computer and use it in GitHub Desktop.
Save ooooak/addea0aa1dfd137a81f6 to your computer and use it in GitHub Desktop.
Download ZIP
form pop up html
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<style type="text/css">
.close{
color: #000;
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
opacity: 0.2;
text-shadow: 0 1px 0 #fff;
}
.close:hover, .close:focus {
color: #000;
cursor: pointer;
opacity: 0.5;
text-decoration: none;
}
#overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: rgba(0,0,0,0.5); /*dim the background*/
display: none;
}
#form-popup{
width: 300px;
margin-left: -150px;
max-height: auto;
position: fixed;
top: 10%;
left: 50%;
background-color: #fff;
border-radius: 5px;
text-align: center;
z-index: 1001; /* 1px higher than the overlay layer */
display: none;
padding: 18px;
}
#form-popup h3{
margin-top: 8px;
margin-bottom: 14px;
border-bottom: 1px solid #F5F5F5;
padding-bottom: 14px;
font-size: 20px;
}
#form-popup #inbound-form-wrapper{
text-align: left;
}
#form-popup #inbound-form-wrapper input{
width: 100%;
}
#form-popup .close{
position: absolute;
right: 12px;
top: 6px;
}
#form-popup .inbound-field.inbound-submit-area{
text-align: center;
}
</style>
<body>
#contact-fo
<div></div>
</body>
<script type="text/javascript">
try{
var html = $('#contact .contact-form');
var body = $('body');
// manage html
body.prepend('<div id="overlay"></div><div id="form-popup"></div>');
var overlay = $('#overlay');
var popup = $('#form-popup');
popup.append('<span class="close">x</span>');
popup.append(mainForm.html());
var popupCloseBtn = $('#form-popup .close');
// handle events
popupCloseBtn.on('click', function(){
popup.fadeOut();
overlay.fadeOut();
body.css('position', 'static');
});
overlay.on('click', function(){
popup.fadeOut();
overlay.fadeOut();
body.css('position', 'static');
});
}catch(e){
console.log(e);
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment