Forked from Claudiu Murariu's Pen eqhsj.
Forked from Claudiu Murariu's Pen eqhsj.
A Pen by Adrian Badarau on CodePen.
<div class="padiOverlay" style="display: block;"> | |
<div class="padiPop4Wrap" style="display: block;"> | |
<div class="padiPop4Overlay" > | |
<div class="padiPopupContent" > <a href="#" class="padiClose" title="Close" style="display:block;" >×</a> | |
<div class="padiContent" style="display:block"> | |
<h1 class="padiTitle"> | |
<!-- any TEXT can go from here --> | |
<!-- to here --> | |
</h1> | |
<!-- any HTML can go from here --> | |
<p style="padding:0;font-size: 21px;color: #636363; ">Abonează-te la newsletterul evoMAG<br>şi poţi câştiga <strong style="color:#cf0001;">un voucher cadou! </strong></p> | |
<!-- to here --> | |
<!--padiForm--> | |
<div class="padiFormWrap"> | |
<p class="padiErrorMessage" style="display:none">Something went wrong!</p> | |
<div class="padiFields"> | |
<form class="padiForm"> | |
<p> | |
<label class="padiLabel"><span>Nume*:</span> | |
<input style="" class="padiField" name="Name|NameBase" type="text"> | |
</label> | |
</p> | |
<p> | |
<label class="padiLabel"><span>Email*:</span> | |
<input style="" class="padiField" name="Email|EmailBase" type="email"> | |
</label> | |
</p> | |
<input type="hidden" name="segment" value="1576"> | |
<p> | |
<button type="submit" name="norilsk_save" class="padiButton"> Subscribe Now </button> | |
<span class="padiPreload" style="display: none;"><img alt="loading..." src="http://d2xgf76oeu9pbh.cloudfront.net/images/ajax-loader.gif"></span></p> | |
</form> | |
</div> | |
<!--padiFields--> | |
</div> | |
<!--padiForm--> | |
<div class="padiPrivacy padiClearfix"> | |
<!-- any HTML can go from here --> | |
<br style="clear:both"/> | |
<p class="privacy">We value your privacy. You can unsubscribe anytime. </p> | |
<!-- to here --> | |
</div> | |
<div class="padiClear"></div> | |
</div> | |
<div class="padiThanks" style="display:none"> | |
<!-- any HTML can go from here --> | |
<p>Thank you for subscribing</p> | |
<!-- to here --> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="padiFade"></div> | |
</div> |
Forked from Claudiu Murariu's Pen eqhsj.
Forked from Claudiu Murariu's Pen eqhsj.
A Pen by Adrian Badarau on CodePen.
//jQuery('.padiContent').hide(); | |
//jQuery('.padiThanks').show(); | |
//jQuery('.padiErrorMessage').show(); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
.padiOverlay { | |
position: fixed; | |
left: 0px; | |
top: 0px; | |
padding: 0px; | |
margin: 0px; | |
visibility: visible; | |
overflow-x: hidden; | |
overflow-y: auto; | |
width: 100%; | |
height: 100%; | |
z-index: 1040; | |
} | |
.padiFade { | |
zoom: 1; | |
background-color: rgba(0,0,0,0.6); | |
width: 100%; | |
height: 100%; | |
z-index: 1041; | |
} | |
.padiPop4Overlay h1, .padiPop4Overlay h2, .padiPop4Overlay h3, .padiPop4Overlay div, .padiPop4Overlay ul, .padiPop4Overlay li, .padiPop4Overlay ol, .padiPop4Overlay p, .padiPop4Overlay a, .padiPop4Overlay input, .padiPop4Overlay input[type=text], .padiPop4Overlay input[type=email] { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
outline: none; | |
font-size: 100%; | |
font-family: Arial, Helvetica, sans-serif; | |
vertical-align: middle; | |
float: none; | |
width: auto; | |
height: auto; | |
background-image: none; | |
letter-spacing: 0; | |
-webkit-box-shadow: none; | |
-moz-box-shadow: none; | |
box-shadow: none; | |
list-style: none; | |
-webkit-text-shadow: none !important; | |
-moz-text-shadow: none !important; | |
text-shadow: none !important; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
-ms-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.padiPop4Overlay *, .padiPop4Overlay *:before, .padiPop4Overlay *:after { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
-ms-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.padiPop4Wrap { | |
position: absolute; | |
visibility: visible; | |
z-index: 1602; | |
padding: 10px; | |
left: 50%; | |
margin-left: -200px; | |
top: 5%; | |
height: auto; | |
width: auto; | |
max-width: 574px; | |
} | |
.padiPop4Overlay { | |
font-family: Arial, Helvetica, sans-serif; | |
font-size: 13px; | |
background-color: rgb(180,180,180); | |
background-color: rgba(180,180,180,0.8); | |
background-image: none; | |
background-repeat: no-repeat; | |
padding: 6px; | |
-moz-border-radius: 6px; | |
-webkit-border-radius: 6px; | |
border-radius: 6px; | |
box-shadow: 0 0 25px rgba(0, 0, 0, 0.8); | |
-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.8); | |
-moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.8); | |
-moz-background-clip: padding; | |
-webkit-background-clip: padding-box; | |
background-clip: padding-box; | |
position: static; | |
margin: 0; | |
z-index: 1060; | |
overflow: auto; | |
} | |
.padiPop4Overlay a { | |
color: inherit; | |
text-decoration: underline; | |
border-bottom: none; | |
} | |
.padiPop4Overlay a:hover { | |
color:inherit; | |
text-decoration: underline; | |
border-bottom: none; | |
} | |
.padiPop4Overlay h1.padiTitle { | |
color: #000; | |
font-size: 18px; | |
font-weight: bold; | |
margin: 0; | |
padding: 15px 0; | |
text-shadow: none; | |
word-spacing: -1px; | |
text-decoration: none; | |
line-height: 22px; | |
} | |
.padiPop4Overlay div.padiPopupContent { | |
position: relative; | |
-moz-border-radius: 6px; | |
-webkit-border-radius: 6px; | |
border-radius: 6px; | |
background: rgb(255,255,255); | |
margin-bottom: 0; | |
-moz-background-clip: padding; | |
-webkit-background-clip: padding-box; | |
background-clip: padding-box; | |
color: #2d2d2d; | |
background-image: url('http://www.evomag.ro/upload/newsletter/POP-up_abonare_NL.jpg?2132'); | |
width: 564px; | |
height: 305px; | |
} | |
.padiPop4Overlay .padiContent { | |
padding: 0 1.6em 0.2em 1.5em; | |
color: #2d2d2d; | |
} | |
.padiPop4Overlay .padiContent p { | |
margin-top: 0; | |
/* margin-bottom: 1.4em; */ | |
margin-left: 15px; | |
} | |
.padiPop4Overlay .padiCriticalMessage { | |
border: none !important; | |
background: #FCC; | |
padding: 10px; | |
font-size: 13px; | |
font-weight: normal; | |
color: #b10000; | |
-moz-border-radius: 6px; | |
-webkit-border-radius: 6px; | |
border-radius: 6px; | |
} | |
.padiPop4Overlay .padiFields { | |
width: 100%; | |
display: block; | |
vertical-align: top; | |
padding: 0; | |
} | |
.padiPop4Overlay .padiThanks { | |
width: 100%; | |
display: block; | |
vertical-align: top; | |
padding: 0; | |
font-weight: bold; | |
color: #2d2d2d; | |
} | |
.padiClearfix:after { | |
content: " "; /* Older browser do not support empty content */ | |
visibility: hidden; | |
display: block; | |
height: 0; | |
clear: both; | |
} | |
.padiPop4Overlay .padiClose { | |
font-family: Arial, Helvetica, sans-serif; | |
padding: 8px; | |
margin: 0; | |
display: block; | |
float: right; | |
font-size: 28px; | |
font-weight: bold; | |
line-height: 18px; | |
color: rgb(180,180,180); | |
text-shadow: none; | |
opacity: 0.5; | |
filter: alpha(opacity=20); | |
text-decoration: none !important; | |
border: none; | |
} | |
.padiPop4Overlay .padiClose:hover { | |
color: rgb(180,180,180); | |
text-decoration: none; | |
opacity: 0.9; | |
filter: alpha(opacity=40); | |
cursor: pointer; | |
text-decoration: none !important; | |
border: none; | |
padding: 8px; | |
margin: 0; | |
display: block; | |
} | |
/* THE FORM FIELDS */ | |
.padiPop4Overlay form { | |
position: relative; | |
padding-top: 35px; | |
margin: 0; | |
display: block; | |
} | |
.padiPop4Overlay form .padiField { | |
display: block; | |
width: 240px; | |
height: 34px; | |
padding: 6px 8px; | |
font-size: 13px; | |
line-height: 1.428571429; | |
color: #2d2d2d; | |
vertical-align: middle; | |
background-color: rgba(255,255,255,0.3); | |
background-image: none; | |
border: 1px solid #CCC; | |
border-radius: 4px; | |
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.18); | |
-moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.18); | |
box-shadow: inset 0 0 3px rgba(0,0,0,0.18); | |
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; | |
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; | |
margin: 4px 0px 3px 0px; | |
font-family: Arial, Helvetica, sans-serif; | |
} | |
.padiPop4Overlay form .padiCheck { | |
margin: 0px 4px 2px 4px; | |
vertical-align: bottom; | |
} | |
.padiPop4Overlay form .padiField:focus { | |
border-color: #666; | |
outline: 0; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(255,255,255,0.6); | |
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(255,255,255,0.6); | |
} | |
.padiPop4Overlay form .padiLabel { | |
font-weight: bold; | |
} | |
.padiPop4Overlay form .padiRadioLabel { | |
font-weight: normal !important; | |
font-size: 12px; | |
} | |
.padiPop4Overlay form option { | |
color: #333; | |
} | |
.padiPop4Overlay form .padiRadio { | |
margin-bottom: 1.4em; | |
padding: 0; | |
list-style: none; | |
} | |
.padiPop4Overlay form .padiRadio li { | |
margin: 3px 0px; | |
} | |
.padiPop4Overlay form .padiButton { | |
color: #fff; | |
background-color: #db0001; | |
border-color: #000; | |
} | |
.padiPop4Overlay form .padiButton:hover { | |
background-color: #444; | |
border-color: #222; | |
} | |
.padiPop4Overlay form .padiButton:active { | |
background-image: none; | |
outline: 0; | |
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.225); | |
box-shadow: inset 0 3px 5px rgba(0,0,0,0.225); | |
} | |
.padiPop4Overlay form .padiButton { | |
display: inline-block; | |
padding: 4px 10px; | |
margin-bottom: 0; | |
margin-top: 5px; | |
font-size: 14px; | |
font-weight: bold; | |
line-height: 1.428571429; | |
text-shadow: 0px 1px 2px rgba(0,0,0,0.3); | |
text-align: center; | |
white-space: nowrap; | |
vertical-align: middle; | |
cursor: pointer; | |
background-image: none; | |
border: 1px solid transparent; | |
border-radius: 10px; | |
-moz-border-radius: 10px; | |
-webkit-border-radius: 10px; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
-o-user-select: none; | |
user-select: none; | |
outline: none; | |
opacity: 0.9; | |
font-family: Arial, Helvetica, sans-serif; | |
} | |
.padiPop4Overlay form .padiButton:hover { | |
opacity: 1; | |
} | |
.padiPop4Overlay form .padiSLabel { | |
font-size: 12px; | |
display: block; | |
margin: 5px 0; | |
} | |
.padiPop4Overlay .privacy { | |
font-size: 11px; | |
font-style: italic; | |
color: #777; | |
margin-bottom: 10px !important; | |
} | |
.padiPreload { | |
display: inline-block; | |
position: absolute; | |
bottom: 0; | |
right: inherit; | |
padding: 3px; | |
} | |