Pop-up 3s Trên Website
HTML :
<div class="section-inner">
<div id="dailycomplete">
<div id="dailyfullscreen">
<div id="dailyposition">
<div class="custom">
<p><a href="#"><img class='lazyload' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' data-src="https://centacity.vn/resources/config/1600334777-popup.png" /></a></p>
</div>
<div class="posdailybut"><input align="center" class="btn btn-primary" id="closedailyp" type="button" value="Đóng lại" /></div>
</div>
</div><input id="dailypopupwidth" type="hidden" value="auto" /><input id="jqtimer" type="hidden" value="5" /><input id="jqanime" type="hidden" value="0" /><input id="actianim" type="hidden" value="1" /></div>
</div>
CSS :
#dailycomplete{visibility:hidden} #dailyfullscreen{background:none repeat scroll 0 0 rgba(0,0,0,0.2);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#000000',EndColorStr='#000000');bottom:0;color:#FFFFFF;left:0;position:fixed;right:0;top:0;width:100%;z-index:10000000000000;display:none} #dailyposition{background:#fff none repeat scroll 0 0;border-radius:10px;box-shadow:0 0 20px 0 rgba(50,50,50,0.75);padding:10px 10px 0;margin:0 auto;transform:translate(0px,20%);width:600px;max-width:95%} #dailyposition img{width:100%;height:auto} #dailyposition br{display:none} .copyrightyannt{background:#D81921;padding:3px} .copyrightyannt a{float:right;text-shadow:1px 1px #333,-1px -1px #444;font-style:italic;font-weight:bolder;font-size:9px;color:#888888;margin-top:1px} .posdailybut{height:50px;text-align:center;width:100%;margin:15px 0 0 0} .dailybutton{box-shadow:inset 0 1px 0 0 #ffffff;background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) );background:-moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% );background-color:#ededed;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;color:#777777;font-family:arial;font-size:15px;font-weight:bold;padding:7px!important;text-decoration:none;text-shadow:1px 1px 0 #ffffff;height:34px;z-index:10000} .dailybutton:hover{background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed) );background:-moz-linear-gradient( center top,#dfdfdf 5%,#ededed 100% );background-color:#dfdfdf} .dailybutton:active{position:relative;top:1px} #dailytimer{margin:auto;position:relative;width:190px} #actdaily{background:none repeat scroll 0 0 transparent;cursor:pointer;height:34px;margin-top:-34px;position:absolute;width:100%;z-index:10001}
JS :
<script>//<![CDATA[ var temp=0;function dpanimfull(num,tp){if(num==1){if(tp==0){jQuery('#dailyposition').show();jQuery("#dailyfullscreen").animate({opacity:"toggle"});} if(tp==1){jQuery("#dailyfullscreen").animate({opacity:"toggle"},function(){jQuery("#dailyposition").animate({opacity:"toggle"});});} if(tp==2){largzone=jQuery("#dailypopupwidth").val();jQuery('#dailyposition').css({'width':'0px'});jQuery("#dailyfullscreen").animate({opacity:"toggle"},function(){jQuery('#dailyposition').show();jQuery("#dailyposition").animate({width:largzone},1500);});}}else{jQuery("#dailyposition").toggle();jQuery("#dailyfullscreen").toggle();}} function rmanimfull(num,tp){if(num==1){jQuery("#dailyfullscreen").animate({opacity:"toggle"},function(){jQuery("#dailyfullscreen").remove();});}else{jQuery("#dailyfullscreen").remove();}} window.onload=setTimeout(function(){letexte2=jQuery("#dailycomplete").html();largzone=jQuery("#dailypopupwidth").val();zetimer=jQuery("#jqtimer").val();actianim=jQuery("#actianim").val();jqanime=jQuery("#jqanime").val();jQuery("#dailycomplete").remove();jQuery('body').prepend(letexte2);fermcl=jQuery('#closedailyp').val();jQuery('#dailyposition').css({'width':largzone+'px','display':'none'});dpanimfull(actianim,jqanime);timetmp=zetimer*1000;if(actianim==1){endrem='jQuery( "#dailyfullscreen" ).animate({ opacity: "toggle" }, function(){jQuery("#dailyfullscreen").remove();});';}else{endrem='jQuery("#dailyfullscreen").remove();';} for(i=zetimer;i>-1;i--){setTimeout("jQuery('#closedailyp').val('"+fermcl+" "+i+"');",temp);temp+=1000;if(temp==timetmp){setTimeout(endrem,temp);}} jQuery('#actdaily').click(function(){rmanimfull(actianim,jqanime);});jQuery('#closedailyp').click(function(){rmanimfull(actianim,jqanime);});}, 3000) //]]></script>