Jquery Twitter Style Popup

In this article, I am gonna show you how to create twitter style jquery popup notification. You can learn how how to create twitter style jquery popup notification with our tutorial. For creating twitter style jquery popup notification, first of all we need jquery.




Download | Demo

This is html of notification. You can modify text into div.

[html]
<div class="popup-box" id="popup-box-1"><div class="close">X</div><div class="top"><h2>Jquery Twitter Style Popup</h2></div><div class="bottom">This is what we will be making (or maybe what we already have) in this tutorial. If you like this, please share. It really helps!</div></div>
<div id="blackout"></div>
[/html]

This is important part of our plugin because plugin works when click on this link.

[html]
<a class="popup-link-1"><b>Click me for a popup!</b></a>
[/html]

This is JS part.

[js]
$(document).ready(function() {
var boxWidth = 400;

function centerBox() {

/* Preliminary information */
var winWidth = $(window).width();
var winHeight = $(document).height();
var scrollPos = $(window).scrollTop();
/* auto scroll bug */

/* Calculate positions */

var disWidth = (winWidth – boxWidth) / 2
var disHeight = scrollPos + 150;

/* Move stuff about */
$(‘.popup-box’).css({‘width’ : boxWidth+’px’, ‘left’ : disWidth+’px’, ‘top’ : disHeight+’px’});
$(‘#blackout’).css({‘width’ : winWidth+’px’, ‘height’ : winHeight+’px’});

return false;
}

$(window).resize(centerBox);
$(window).scroll(centerBox);
centerBox();

$(‘[class*=popup-link]’).click(function(e) {

/* Prevent default actions */
e.preventDefault();
e.stopPropagation();

/* Get the id (the number appended to the end of the classes) */
var name = $(this).attr(‘class’);
var id = name[name.length – 1];
var scrollPos = $(window).scrollTop();

/* Show the correct popup box, show the blackout and disable scrolling */
$(‘#popup-box-‘+id).show();
$(‘#blackout’).show();
$(‘html,body’).css(‘overflow’, ‘hidden’);

/* Fixes a bug in Firefox */
$(‘html’).scrollTop(scrollPos);
});
$(‘[class*=popup-box]’).click(function(e) {
/* Stop the link working normally on click if it’s linked to a popup */
e.stopPropagation();
});
$(‘html’).click(function() {
var scrollPos = $(window).scrollTop();
/* Hide the popup and blackout when clicking outside the popup */
$(‘[id^=popup-box-]’).hide();
$(‘#blackout’).hide();
$("html,body").css("overflow","auto");
$(‘html’).scrollTop(scrollPos);
});
$(‘.close’).click(function() {
var scrollPos = $(window).scrollTop();
/* Similarly, hide the popup and blackout when the user clicks close */
$(‘[id^=popup-box-]’).hide();
$(‘#blackout’).hide();
$("html,body").css("overflow","auto");
$(‘html’).scrollTop(scrollPos);
});
});
[/js]