Create A Fullpage & Responsive Notification Box with jQuery and CSS3

Notification Popup is a jQuery plugin allows you to create a full page, fully responsive and flat style notification box with subtle CSS3 transition effects. Click outside of the notification box to close the popup window. Also can be used for modal windows, dialog boxes and any other popup types.

How to use it:

1. Include the necessary jQuery javascript library on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Create the content for the notification box.

<div id="screen"></div>
<div id="notification">
<span id="line1" class="menuText"> First line</span>
<span class="menuText"> Secont line </span>
<div id="close"><span class="text">Close</span></div>
</div>

3. Create a button to open a notification box.

<div id="clickme">
<span class="text">Click me</span>
</div>

4. And then wrap them in a container element.

<div id="content">

...

</div>

5. The required CSS rules to style the popup. Feel free to change the styles as you want.

#notification {
-webkit-transition: All .5s ease;
-moz-transition: All .5s ease;
-o-transition: All .5s ease;
-ms-transition: All .5s ease;
transition: All .5s ease;
color: #444;
font-family: Lato;
font-weight: 300;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
border-radius: 5px;
z-index: 2;
width: 20%;
height: 20%;
background-color: #FCF8EA;
opacity: 0;
visibility: hidden;/*border: solid 1px #000;*/
}
.menuText {
display: block;
text-align: center;
padding-bottom: 5px;
}
#line1 {
padding-top: 10px;
}
#close {
font-family: Lato;
font-weight: 300;
text-align: center;
-webkit-transition: All .5s ease;
-moz-transition: All .5s ease;
-o-transition: All .5s ease;
-ms-transition: All .5s ease;
transition: All .5s ease;
cursor: pointer;
cursor: hand;
background-color: #EA8475;
color: #FFF;
width: 150px;
height: 50px;
border-radius: 5px;
position: absolute;
top: 50px;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
#close:hover {
background-color: #E8A096;
}

6. The jQuery script to enable the notification box.

function buttonEvents(){
/*Show notification box*/
$("#clickme").click(function(){
$("#screen").css({"visibility":"visible","opacity":".7"});
$("#notification").css({"visibility":"visible","opacity":"1","width":"300px", "height":"150px"});
$("#content").css({"height":"90%", "width":"90%","border-radius":"10px"});

});

/*Close notification*/
$("#close").click(function(){
$("#screen").css({"opacity":"0","visibility":"hidden"});
$("#notification").css({"height":"20%", "width":"20%","opacity":"0","visibility":"hidden"});
$("#content").css({"height":"100%", "width":"100%","border-radius":"none"});
});

/*Close when user clicks outside of notification box*/
$("#screen").click(function(){
$("#screen").css({"opacity":"0","visibility":"hidden"});
$("#notification").css({"height":"20%", "width":"20%","opacity":"0","visibility":"hidden"});
$("#content").css({"height":"100%", "width":"100%","border-radius":"none"});
});
}

if(window.attachEvent){window.attachEvent('onload', buttonEvents);}
else if(window.addEventListener){window.addEventListener('load', buttonEvents, false);}
else{document.addEventListener('load', buttonEvents, false);}

---

This awesome jQuery plugin is developed by parkyoung555. For more Advanced Usages, please check the demo page or visit the official website.