Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
On Page load POPUP
<style>
/*** VG Popup Starts here *****/
#vg-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.vg-popup-content a{
text-decoration: none;
}
.vg-popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
height: 100%;
overflow: auto;
z-index: 101;
top: 0;
}
.vg-popup-content{
min-width: 600px;
width: 62%;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding-left: 28px;
padding-right: 28px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.vg-popup-content p{
clear: both;
}
.vg-popup-content p a{
color: #d91900;
font-weight: bold;
}
.vg-popup-content .vg-popup-close{
float: right;
height: 35px;
position: relative;
left: 39px;
top: 0;
width: 34px;
}
.vg-popup-content .vg-popup-close:hover{
cursor: pointer;
}
.printd {
background: #fff ;
border: 1px solid #d1d1d1;
padding: 12px;
}
.printd p{
font-size: 14px;
}
.printd p a{
text-decoration: underline;
}
.vg-popup-content .wpb_single_image img{
border: 1px solid #d1d1d1;
}
.vg-popup-content .promo-orange-button{
margin: -23px auto 36px;
}
.vg-popup-content .promo-orange-button a{
background-color: #FF5000 !important;
}
.vg-popup-content .vc_general.vc_btn3{
color: #fff !important;
font-weight: 600;
padding: 10px 38px;
}
@media screen and (max-width: 600px){
.vg-popup-content{
min-width: 93%;
}
}
@media screen and (max-width: 768px){
.vg-popup-content .vg-popup-close{
z-index: 999;
}
}
/***** POPUP end ****/
</style>
<!-- VG POPUP starts here -->
<div class='vg-popup'>
<div class='vg-popup-content'>
<div class="vg-popup-close" id="vg-popup-close">X</div>
<?php echo ls_content_block_by_id( 350530, 'full' ); ?>
</div>
</div>
<!-- VG POPUP END here -->
<script>
jQuery(function(){
jQuery('.subscribe-to-magazine').click(function(){
var overlay = jQuery('<div id="vg-overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
jQuery('body').css('overflow', 'hidden');
jQuery('.vg-popup').show();
});
jQuery('.close').click(function(){
jQuery('.vg-popup').hide();
jQuery('body').css('overflow', 'visible');
overlay.appendTo(document.body).remove();
return false;
});
jQuery('.vg-popup-close').click(function(){
jQuery('.vg-popup').hide();
overlay.appendTo(document.body).remove();
jQuery('body').css('overflow', 'visible');
return false;
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment