jerturowetz
3/22/2017 - 3:00 PM
half page modal popup for mailer signup
half page modal popup for mailer signup
<!DOCTYPE html>
<html class="no-js" lang="en-US" itemtype="http://schema.org/WebPage" id="global-schema-obj">
<head>
<title>Modal Test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<div class="modal-prompt modal-prompt-shown" style="display: block; z-index: 10000; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
<style>
.modal-overlay {
overflow-y: scroll;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: rgba(0, 0, 0, 0.8);
/*dim the background*/
cursor: pointer;
}
.modal-close-half-page {
background: none;
color: white;
font-weight: 100;
position: fixed;
top: 30px;
right: 30px;
font-size: 62px;
opacity: 0;
transition: opacity 0.4s ease;
}
.modal-prompt-half-page {
display: block;
height: 100%;
position: fixed;
width: 50%;
background-color: #21c1ff;
top: 0;
left: 0;
}
.modal-prompt-half-page-arrow {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #21c1ff;
position: absolute;
top: 50%;
right: -19px;
margin-top: -20px;
}
.modal-prompt-header {
position: absolute;
font-size: 4vw;
line-height: 4vw;
color: white;
text-align: right;
text-transform: inherit;
top: 50%;
transform: translateY(-50%);
font-weight: 700;
padding: 0 55px;
}
.modal-prompt-half-page {
left: calc(-50% + 80px);
width: calc(50% - 100px);
transform: translateX(0);
transition: transform 0.4s ease 0.4s;
}
.modal-overlay {
opacity: 0;
transition: opacity 0.4s ease;
top: 0;
}
.social-prompt-email-form {
background-color: transparent;
position: absolute;
top: 0;
bottom: 0;
transform: translateX(0);
margin: auto 0;
width: 425px;
height: 60px;
transition: transform 0.4s ease;
right: 0;
z-index: -1;
}
.social-prompt-email-input {
position: absolute;
left: 0;
bottom: 0;
padding: 0 9px;
font-size: 24px;
background-color: white;
border: 0;
width: calc(100% - 145px);
height: 60px;
line-height: normal;
outline: none;
transition: background-color 0.2s ease;
}
.social-prompt-email-submit {
position: absolute;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
background: #21c1ff;
width: 128px;
box-sizing: border-box;
transition: background-color 0.2s ease;
height: 60px;
line-height: 60px;
font-size: 24px;
outline: none;
}
.social-prompt-email-submit:hover {
background: #1eade6;
color: white;
}
.social-prompt-email-submit.sending {
background: #e4e4e4;
}
.social-prompt-email-submit.sent {
background: #03D574;
}
.social-prompt-email-error {
display: none;
position: absolute;
left: 0;
bottom: -25px;
color: #F24937;
font-weight: 700;
}
.social-prompt-email-error.shown {
display: block;
}
.modal-prompt-half-page-cover {
width: 100%;
height: 100%;
background: #21c1ff;
}
.modal-prompt-shown .modal-prompt-half-page {
transform: translateX(calc(100% + 20px));
transition: transform 0.4s ease;
}
.modal-prompt-shown .modal-overlay {
opacity: 1;
}
.modal-prompt-shown .social-prompt-email-form {
transform: translateX(calc(100% + 50px));
transition: 0.4s transform ease 0.4s;
}
.modal-prompt-shown .modal-close-half-page {
opacity: 1;
}
@media (max-width: 1125px) {
.modal-prompt-half-page {
width: 275px;
left: -295px;
transform: translateX(0);
}
.modal-prompt-shown .modal-prompt-half-page {
transform: translateX(295px);
}
.modal-prompt-header {
font-size: 30px;
line-height: 30px;
padding: 0px 30px;
}
}
</style>
<div class="modal-overlay"></div>
<div class="modal-prompt-half-page">
<div class="modal-prompt-header modal-copy-container">Get five stories every day that challenge you to rethink the world.</div>
<div class="modal-prompt-half-page-arrow"></div>
<form class="social-prompt-email-form">
<input class="social-prompt-email-input" placeholder="Enter your email" name="email-input">
<button class="social-prompt-email-submit button">Sign up</button>
<div class="social-prompt-email-error">That email address isn't valid!</div>
</form>
<div class="modal-prompt-half-page-cover"></div>
</div>
<div class="modal-close modal-close-half-page">×</div>
</div>
</body>