How to create windows style sliding popup using jquery & html. Sliding popup (Message strip) displays on click and any other event. You can also use with c# code (calling from code behind file c#) with passing message & icon type(OK, Warning, Error etc...).
1. HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.6.1.min.js"
type="text/javascript"></script>
<link href="css/style.css"
rel="stylesheet"
type="text/css"
/>
<script type="text/javascript">
function ShowPopup(message, iconClass) {
$(function () {
$("#messagecontainer").html(message);
$("#Righticon").addClass(iconClass);
$("#message").slideDown(1000);
});
};
function closeNotice() {
$("#message").slideUp(1000);
}
</script>
</head>
<body>
<div id='message' style="display: none;">
<div id="Righticon">
</div>
<span id="messagecontainer"></span>
<div class="close"
onclick="closeNotice()">
</div>
</div>
<form action="">
<div class="wrapper">
<div class="inner">
<h2 style="color: #FFF;">
Windows(Azure) Style Sliding Popup (Message Strip)!!</h2>
<br />
<br />
<a href="#" style="border: 1px solid #DDD; background-color: #8cc7e5; padding: 20px;
text-decoration: none; color: #FFF;; font-size: 20px;" onclick="ShowPopup('Hello, This Is Windows Style Sliding
Popup','iconOk')">
Click Here !!</a>
</div>
</div>
</form>
</body>
</html>
2. CSS Code
#message
{
font-family: Segoe UI;
position: fixed;
bottom: 0;
left: 0px;
width: 100%;
z-index: 105;
text-align: center;
font-size: 100%;
color: white;
padding: 10px 0px 10px 0px;
background-color: #495461;
opacity: .80;
filter: alfa(opacity=80);
}
#message span
{
text-align: center;
width: 90%;
font-size: 18px;
line-height: 40px;
}
#message .iconOk
{
background-image: url(/Images/icons/icon-success.png);
width: 0px;
margin-left: 1%;
width: 41px;
height: 41px;
float: left;
}
.close
{
background-image: url(/Images/icons/icon-close.png);
white-space: nowrap;
float: right;
margin-right: 1%;
color: #fff;
text-decoration: none;
width: 41px;
height: 41px;
cursor: pointer;
}
.wrapper
{
background-color: #8cc7e5;
width: 850px;
padding: 15px;
font-family: "Segoe UI
Light";
margin: 50px auto;
}
.inner
{
background-color: #565551;
color: #fff;
padding-bottom: 40px;
text-align: center;
}
2. C# Code
ClientScript.RegisterStartupScript(this.GetType(), "Popup",
"ShowPopup('Hello,
This Is Windows Style Sliding Popup','iconOk');",
true);
3. Page View and Click on Button
4. Page View After Click On Button With Sliding Popup
