Step 1
Add html code in header.php file
<div class="wp-popup">
<div class="wp-popup-overlay"></div>
<div class="wp-popup-inner">
<div class="wp-popup-form">
<div class="wp-popup-img">
<div class="wp-popup-img-background" style="background: url('https://bimber.bringthepixel.com/main/wp-content/uploads/sites/17/2018/01/newsletter-popup-visual.jpg');"></div>
</div>
<div class="wp-popup-content">
<h3>Hey Friend! Before You Go…</h3>
<p>Get the best viral stories straight into your inbox before everyone else!</p>
<div class="email-form">
<?php echo do_shortcode('[mc4wp_form id="10"]'); ?>
</div>
</div>
</div>
<div class="wp-popup-close"><img src="<?php bloginfo('template_url'); ?>/assets/images/wp-popup-close.svg"></div>
</div>
</div>
Step 2
Add Css stykle in style.css file
.wp-popup .wp-popup-inner{
display: block;
position: fixed;
visibility: hidden;
z-index: 1050;
width: 1000px;
left: 50%;
top: 50%;
opacity: 0;
background-color: #ffffff;
-webkit-transform: translate(-50%,-50%) scale(.85);
-moz-transform: translate(-50%,-50%) scale(.85);
-ms-transform: translate(-50%,-50%) scale(.85);
-o-transform: translate(-50%,-50%) scale(.85);
transform: translate(-50%,-50%) scale(.85);
transition: visibility 0s 375ms,opacity 375ms ease-in-out,transform 375ms ease-in-out;
}
.wp-popup-show .wp-popup .wp-popup-inner{
visibility: visible ;
opacity: 1 ;
transition: visibility 0s,opacity 375ms ease-in-out,transform 375ms ease-in-out ;
-webkit-transform: translate(-50%,-50%) scale(1) ;
-moz-transform: translate(-50%,-50%) scale(1) ;
-ms-transform: translate(-50%,-50%) scale(1) ;
-o-transform: translate(-50%,-50%) scale(1) ;
transform: translate(-50%,-50%) scale(1) ;
}
.wp-popup-show .wp-popup .wp-popup-overlay{
visibility: visible ;
opacity: 1 ;
transition: visibility 0s,opacity 375ms ease-in-out,transform 375ms ease-in-out ;
}
.wp-popup .wp-popup-inner .wp-popup-img{
width: 50%;
height: 540px;
max-height: 90vh;
overflow: hidden;
position: relative;
}
.wp-popup .wp-popup-inner .wp-popup-form{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
margin-bottom: 0;
box-shadow: 0 5px 20px rgba(0,0,0,.1);
}
.wp-popup .wp-popup-inner .wp-popup-img .wp-popup-img-background{
display: block;
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-position: 50% 50%;
background-size: cover !important;
}
.wp-popup .wp-popup-inner .wp-popup-content{
box-sizing: border-box;
width: 50%;
padding: 40px 40px 40px 40px;
text-align: center;
}
.wp-popup .wp-popup-inner .wp-popup-content h3{
font-size: 35px;
font-weight: 700;
line-height: 1.1;
}
.wp-popup .wp-popup-inner .wp-popup-content p{
font-size: 16px;
}
.wp-popup .wp-popup-inner .wp-popup-close{
position: absolute;
display: block;
right: 5px;
top: 5px;
border-radius: 50%;
background-color: #f2f2f2;
line-height: 0;
padding: 8px;
cursor: pointer;
}
.wp-popup .wp-popup-inner .wp-popup-close img{
width: 15px;
}
.wp-popup .wp-popup-inner .wp-popup-content .email-form .mc4wp-form .mc4wp-form-fields input{
box-sizing: border-box;
width: 100%;
height: 36px;
margin-bottom: 10px;
font-size: 14px;
padding: 6px 12px;
border: 1px solid #e6e6e6;
border-radius: 5px;
transition: border-color 375ms ease-in-out,background-color 375ms ease-in-out,color 375ms ease-in-out;
}
.wp-popup .wp-popup-inner .wp-popup-content .email-form .mc4wp-form .mc4wp-form-fields input:last-child{
text-transform: uppercase;
}
.wp-popup .wp-popup-overlay{
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.6);
z-index: 1;
opacity: 0;
transition: visibility 0s 375ms,opacity 375ms ease-in-out,transform 375ms ease-in-out;
}
.overflow-h{
overflow: hidden;
}
Step 3
Add jQuery code in footer.php file
<script type="text/javascript">
jQuery(".site-description").ready(function(){
jQuery('html').addClass('wp-popup-show');
jQuery('html body').addClass('overflow-h');
});
jQuery(".wp-popup-close").click(function(){
jQuery('html').removeClass('wp-popup-show');
jQuery('html body').removeClass('overflow-h');
});
jQuery(".wp-popup-overlay").click(function(){
jQuery('html').removeClass('wp-popup-show');
jQuery('html body').removeClass('overflow-h');
});
</script>
Comments
Post a Comment