<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<title>jQuery Win8 Notify Demos</title>
<link rel="stylesheet" type="text/css" href="css/win8-notify.css">
<style type="text/css">
body
{
margin: 0px 0px 0px 0px;
background-color: white;
color: black;
}
#demo-notif
{
margin-top: 150px;
text-align: center;
}
#demo-notif button
{
border: solid 2px white;
padding: 40px;
min-width: 10%;
margin-top: 2%;
margin-left: 1%;
text-align: center;
font-weight: bold;
margin-bottom: 2%;
cursor: pointer;
}
</style>
<style>
.notification{
display: none; /* To initially hide the notification .... can be commented if not required. */
}
/* To dim the background Elements */
.dark-back{
position: fixed;
z-index: 2;
top: 0px;
opacity: 0.9;
background-color: black;
width: 100%;
height: 100%;
}
/* The Notification body */
.win8-notif-body{
position: fixed;
z-index: 3;
top:30%;
margin: 0px 0px 0px 0px;
text-align: left;
min-height: 20%;
padding: 40px 20% 40px 20%;
font-family: sans-serif;
}
.win8-notif-body h3{
font-size: 1.5em;
}
.win8-notifiy-body p{
font-size: 1em;
}
.win8-notif-button{
border: solid 2px white;
padding: 10px;
min-width: 10%;
display: block;
margin-top: 2%;
margin-left: 2%;
float: right;
font-weight: bold;
margin-bottom: 2%;
}
/* Various Colors supported by Windows 8.x */
.black{
background-color: rgb(39, 37, 37);
color:white;
}
.black button{
background-color: rgb(66, 60, 60);
cursor: pointer;
color: white;
}
.black .win8-notif-body{
background-color: rgb(39, 37, 37);
color:white;
}
.black button:hover{
background-color: rgb(182, 44, 88);
}
.green{
background-color: rgb(50, 179, 106);
color:white;
}
.green button{
background-color: rgb(50, 179, 106);
cursor: pointer;
color: white;
}
.green .win8-notif-body{
background-color: rgb(50, 179, 106);
color:white;
}
.green button:hover{
background-color: rgb(29, 92, 56);
}
.teal{
background-color: 008299;
color:white;
}
.teal button{
background-color: 008299;
cursor: pointer;
color: white;
}
.teal .win8-notif-body{
background-color: 008299;
color:white;
}
.teal button:hover{
background-color: 00A0B1;
}
.blue{
background-color: 2672EC;
color:white;
}
.blue button{
background-color: 2672EC;
cursor: pointer;
color: white;
}
.blue .win8-notif-body{
background-color: 2672EC;
color:white;
}
.blue button:hover{
background-color: 2E8DEF;
}
.purple{
background-color: 8C0095;
color:white;
}
.purple button{
background-color: 8C0095;
cursor: pointer;
color: white;
}
.purple .win8-notif-body{
background-color: 8C0095;
color:white;
}
.purple button:hover{
background-color: A700AE;
}
.dark-purple{
background-color: 5133AB;
color:white;
}
.dark-purple button{
background-color: 5133AB;
cursor: pointer;
color: white;
}
.dark-purple .win8-notif-body{
background-color: 5133AB;
color:white;
}
.dark-purple button:hover{
background-color: 643EBF;
}
.pink{
background-color: rgb(244, 114, 208);
color:white;
}
.pink button{
background-color: rgb(244, 114, 208);
cursor: pointer;
color: white;
}
.pink .win8-notif-body{
background-color: rgb(244, 114, 208);
color:white;
}
.pink button:hover{
background-color: BF1E4B;
}
.red{
background-color: AC193D;
color:white;
}
.red button{
background-color: AC193D;
cursor: pointer;
color: white;
}
.red .win8-notif-body{
background-color: AC193D;
color:white;
}
.red button:hover{
background-color: BF1E4B;
}
.orange{
background-color: D24726;
color:white;
}
.orange button{
background-color: D24726;
cursor: pointer;
color: white;
}
.orange .win8-notif-body{
background-color: D24726;
color:white;
}
.orange button:hover{
background-color: DC572E;
}
.amber{
background-color: rgb(240, 163, 10);
color:white;
}
.amber button{
background-color: rgb(240, 163, 10);
cursor: pointer;
color: white;
}
.amber .win8-notif-body{
background-color: rgb(240, 163, 10);
color:white;
}
.amber button:hover{
background-color: rgb(227, 200, 0);
}
.yellow{
background-color: rgb(227, 200, 0);
color:white;
}
.yellow button{
background-color: rgb(227, 200, 0);
cursor: pointer;
color: white;
}
.yellow .win8-notif-body{
background-color: rgb(227, 200, 0);
color:white;
}
.yellow button:hover{
background-color: rgb(240, 163, 10);
}
.brown{
background-color: rgb(130, 90, 44);
color:white;
}
.brown button{
background-color: rgb(130, 90, 44);
cursor: pointer;
color: white;
}
.brown .win8-notif-body{
background-color: rgb(130, 90, 44);
color:white;
}
.brown button:hover{
background-color: rgb(240, 163, 10);
}
</style>
</head>
<body onload="showNotification('green')">
<div id="notification" class="notification">
<div class="win8-notif-body">
<div class="mid">
<h3>Heading</h3>
<p>This is the demo notifification descrption that can be long enough.sjkdfhgsjkldfsgkldfjg
sdfgksldfjgkl
sdfkgsj;dlfkgj
dfjgkd;fklgjs;dfg
sdfgjsldkfjg</p>
<button class="win8-notif-button">OK</button>
<button class="win8-notif-button">CANCEL</button>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var def="black";
function showNotification(color){
$( "#notification" ).removeClass(def);
$( "#notification" ).addClass(color);
def=color;
$( "#notification" ).fadeIn( "slow" );
//alert('hi');
$(".win8-notif-button").click(function(){
//alert('hi');
$(".notification").fadeOut("slow");
});
}
</script>
</body>
</html>
