Happy New Year - jQuery Popup For Sites!

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.

This Popup plugin contains 4 Unique Features!

  1. Falling snowflakes,
  2. It has a digital countdown timer,
  3. It has 3 different animations,
  4. Supports HTML5 sessionStorage functionality to set cookie in order to control the popup display. You can choose to show the popup once or several times.

It is perfectly compatible with all major browsers. A perfect way to greet your website visitors.  You can add it easily to your blogspot or wordpress blogs or on HTML webpage you may have. It is extremely easy to customize. View the demos below and then proceed to the installation guide.

Note: I have willingly set the counter to 2017 so that the demo may live longer :)

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 and skip step#5.

Add the following CSS code instead of the code shared in step#5 of previous tutorial:

/* -------------------------------------------------- 
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/AVvXsEhCCGhWPYXELLmYbseN5eD6O55XuTW2ZYab5ndTJGhZ0cV5Vrt9UbCHLnfUlAQJ5qEY-StPTB9crCDCPQ4KEFNbTvMlUxqks9JDDOWEP85cADMguc5DaeZ5kpg6G9W3mdHBTI6yOOQj5lc/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;
        }

That's all!

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://tools.mybloggertricks.com/mbt-counter.js"></script>
        <a class="close-reveal-modal">&#215;</a>
        </div>

Need Help?

Kindly let me know if you needed any help. I whole heartedly expect that you will like this pleasant gift for new year. Happy new year 2016 buddies but before I go here goes my new year resolution:

"Spending more time with my newly born baby "Ifza" and ofcourse blogosphere."

Love you all buddies! What are your new year resolution? =)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

15 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Muhammad Mustafa Bhai, You are my most favorite blogger from Pakistan :) Allah bless you sir.

    ReplyDelete
    Replies
    1. May Allah bless people like you with respect in heart. =) Thank you for honoring this small man

      Delete
  2. Just one Word = WoW..!!!
    Thank You Bro.

    ReplyDelete
    Replies
    1. Pleasure dear Paramjot! Always welcomed =)
      Happy new year!

      Delete
  3. A good approach with coding.

    Thanks for the widget!

    ReplyDelete
    Replies
    1. Thank you for the kind feedback Umer. I am glad you liked it =)

      Delete
  4. this is really nice idea to wish new year to our visitor

    Regards
    Aana

    ReplyDelete
  5. How can i set the exact date and time ...
    its showing 1775 days....

    ReplyDelete
    Replies
    1. Please read follow the link in tutorial where I have shared how to customize it and change the time stamp

      Delete
  6. Hello Mohammad,

    After seeing live demo, I must say golden color really attracts our eyes.

    you did really amazing coding :)

    ReplyDelete
  7. great idea, I try to my site. and really works very well

    ReplyDelete
  8. Check the link in tutorial for changing date and time

    ReplyDelete