How can create Dynamic Alert Message box :
Evert times we need confirmation after data created or updated in database. In this case we can make one popup message box with help of java script we can also put dynamic value in this popup message box.
1 STEP: Create 2 two function one for show message box or second one for hide message box.
2 STEP: Write CSS for message box design.
3 STEP: Create div where display message.
4 STEP: Write our message in label control in cs page.
1 STEP:
<script type="text/javascript">
function ShowDialog(modal) {
$("#overlay").show();
$("#dialog").fadeIn();
if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function (e) {
HideDialog();
});
}
return false;
}
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>
2 STEP:<style type="text/css">
.web_dialog_overlaycm
{
position: fixed;
top: 25%;
right: 0%;
bottom: 5%;
left: 40%;
height: 29%;
width: 56%;
margin: 0;
padding: 0;
background: #f3c022;
-moz-opacity: .15;
z-index: 20000;
display: none;
}
.web_dialogcm
{
display: none;
position: fixed;
width: 54%;
height: 24%;
top: 27%;
left: 41%;
background-color: #ffffff;
/* border: 1px solid #993333;*/
border: 1px solid #5db2ff;
padding: 0px;
z-index: 20000;
font-family: Verdana;
font-size: 10pt;
}
.style1
{
width: 100%;
}
</style>
3 STEP:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<table class="style1">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</td>
<td>
</td>
</tr>
</table>
<div id="overlay" class="web_dialog_overlaycm" style="width: 20%; float: center;">
<div id="dialog" class="web_dialogcm" style="width: 18%; float: center;">
<div style="width: 100%; float: center;">
<table style="width: 100%;">
<tr align="center">
<td style="text-align: center;">
</td>
</tr>
<tr align="center">
<td style="text-align: center;">
</td>
</tr>
<br>
<tr align="center">
<td style="text-align: center;">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
</table>
</div>
<div style="width: 100%; float: left;">
<table id="tblZoom" style="width: 200px;" align="center">
<tr id="Zoom1" runat="server">
<td id="Td2" runat="server">
<div id="divZoom" style="border: 1px solid #5db2ff; float: center; vertical-align: top;"
align="center">
</div>
</td>
</tr>
<br>
<tr align="center">
<td style="text-align: center;">
</td>
</tr>
<tr align="center">
<td style="text-align: center;">
</td>
</tr>
<tr align="center">
<td style="text-align: center;">
<input id="btnClose" type="button" value="OK" onclick="HideDialog()" />
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
using System;
using System.Data;
using System.Globalization;
using System.Resources;
using System.Threading;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
using System.Web;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Country Created Or Updated Sucessfully In Database.";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "function", "ShowDialog(true);", true);
}
}
No comments :
Post a Comment