jQuery notification popup for all direction

jQuery modal popup, popup without plugin, jQuery popup example, jQuery notification bar, jquery alert box, jquery notification message example, simple popup, message for specific time, jQuery message box bottom right, jQuery message box bottom left, jQuery message box top right, jQuery message box top left, notification for specific time.

Display notification message in popup for specific time by simple html,css and one line jquery code. Demo given for display small popup message on top-left, top-right, bottom-left and bottom-right area for 2 second. Example given for all four page direction with button click event. You can use your desired notification message direction for page.

Demo jQuery notification popup div for specific time

 

CSS for popup div:

<style>
.footer-bottom-left{display:none;padding:5px 10px;background-color:#000;color:#fff;width:210px;text-align:center;position:fixed;bottom:10px;left:10px;z-index:999;}
.footer-bottom-right{display:none;padding:5px 10px;background-color:#000;color:#fff;width:210px;text-align:center;position:fixed;bottom:10px;right:10px;z-index:999;}
.footer-top-left{display:none;padding:5px 10px;background-color:#000;color:#fff;width:210px;text-align:center;position:fixed;top:10px;left:10px;z-index:999;}
.footer-top-right{display:none;padding:5px 10px;background-color:#000;color:#fff;width:210px;text-align:center;position:fixed;top:10px;right:10px;z-index:999;}
</style>

HTML for initialize popup:

<div class="footer-bottom-left">This is footer-left popup message.</div>
<div class="footer-bottom-right">This is footer-right popup message.</div>
<div class="footer-top-left">This is top-left popup message.</div>
<div class="footer-top-right">This is top-right popup message.</div>

JS function for popup:

<script>
function popMessage(className){
    $('.'+className).fadeIn(1000, function(){
        setTimeout(function(){$('.'+className).fadeOut(1000); }, 2000);
    });
}
</script>

Display popup by CLASS/ID SELECTOR:

$(CLASS/ID SELECTOR).fadeIn(1000, function(){
    setTimeout(function(){ $(CLASS/ID SELECTOR).fadeOut(1000); }, 2000);
});