Get Free Happy New Year - jQuery Popup For Sites!

Time fly too fast! Two years back we released a combination of 2 different popups to wish your website visitors happy winter holidays and happy new year, we are releasing today a dynamic popup for new year so that you may not remain dependant on a fixed background theme and instead change the date and time by editing the text.

How to install this popup?

All steps are exactly similar to the ones we already shared on our christmas popups tutorial except for the styling which I will discuss here. Kindly therefore follow all steps shared in the Winter Holidays tutorial linked below. Follow all steps there

Add the following CSS code instead of the code  
             

/* -------------------------------------------------- 
New Year Popup by MBT
-------------------------------------------------- */
#mbt-counter {
padding: 10px;
font-family: oswald,verdana;
background-color: transparent !important;
position: relative;
top: 28%;
font-size: 25px;
left: 28%;
text-shadow: 1px 2px 4px rgb(51, 51, 51);
color: rgb(255, 254, 198) !important;
border: 2px solid orange;}
        .reveal-modal h2 { 
   position: relative;
top: 25%;
font-family: oswald,arial;
font-size: 1.7em;
text-shadow: 2px 4px 10px #000;
color: orange;
text-align: center;}
    .reveal-modal-bg {
        position: fixed;
        height: 100%;
        width: 100%;
        background: rgba(0,0,0,.8);
        z-index: 100;
        display: none;
        top: 0;
        left: 0;
        }
    .reveal-modal {
        visibility: hidden;
        left: 50%;
        top:170px;
        margin-left: -300px;
        width: 550px;
        height: 305px;
        background: rgba(51, 51, 51, 0) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkNqrv0XwfVLvm8W82NKJQML6D3v6bAupnA9NhEaiUIxml_xh_hBmz4rjc5O82mi_54J-m0XYRw7Ygibrf7N76vYniYcKjnl11N6edoRgjxVagomSCoga2Ujcdp6JJLpMyeqMNpZZ4SM4/s1600/happy-new-year-png.png) no-repeat -17px 0px;
        position: absolute;
        z-index: 101;
        padding: 30px 40px 34px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        color: #FFF;
        }
    .reveal-modal.small         { width: 200px; margin-left: -140px;}
    .reveal-modal.medium         { width: 400px; margin-left: -240px;}
    .reveal-modal.large         { width: 600px; margin-left: -340px;}
    .reveal-modal.xlarge         { width: 800px; margin-left: -440px;}
    .reveal-modal .close-reveal-modal {
        font-size: 32px;
line-height: 0.5;
position: absolute;
right: 25px;
font-weight: bold;
cursor: pointer;
bottom: 25px;
color: orange;
        }
        .reveal-modal .close-reveal-modal:hover {
            color:#2d2d2f;
        }

Hide Winter Snow Fall

If you don't want to show the falling snow then kindly remove this code:

$(document).snowfall({deviceorientation : true, round : true, minSize: 1, maxSize:8,  flakeCount : 250});

This code is given in step#4 of previous tutorial.

The HTML

For step#6 use the following HTML code

<div id="myModal" class="reveal-modal" >
        <h2>Count Down Begins...</h2>
        <script type='text/javascript' src="http://yourjavascript.com/411632510116/mbt-counter.js"></script>
        <a class="close-reveal-modal">&#215;</a>
        </div>