Message box is a must in a web application right now. I will show example how to create message box like picture above.
Requirement to try this example :
- AjaxControl Toolkit
- User Control : MessageBox.ascx
- Sample Page To call Message Box : MessageModalPopup.aspx
The MessageBox.ascx
<link href="../messageBoxStyle.css" type="text/css" rel="Stylesheet" /> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager> <asp:ModalPopupExtender BackgroundCssClass="modalBackground" ID="ModalPopupExtender1" Drag="true" DropShadow="true" PopupControlID="Panel1" TargetControlID="Button2" runat="server"> </asp:ModalPopupExtender> <asp:Button ID="Button2" runat="server" Text="Button" Style="display: none;" /> <asp:Panel ID="Panel1" runat="server" Style="display: none;"> <div id="MessageBox"> <div id="signup-ct"> <div id="MessageBox-header"> <h2> <asp:Label ID="Label2" runat="server"></asp:Label> </h2> </div> <div class="txt-fld"> <label> <asp:Label ID="Label1" runat="server"></asp:Label></label> </div> <div class="btn-fld"> <asp:Button ID="Button1" runat="server" Text="OK" CssClass="button" OnClick="Button1_Click" /> </div> </div> </div> </asp:Panel> Note : The message box user controller will call css style for the box Ui
The Message Box Style
#MessageBox
{
width: 404px;
padding-bottom: 2px;
background: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7);
-moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}
.modalBackground
{
border-color: Gray;
filter: alpha(opacity=65);
opacity: 0.65;
-moz-opacity: 0.65;
}
#MessageBox-header
{
background:#CCCCCC;
padding: 18px 18px 14px 18px;
border-bottom: 1px solid #CCC;
border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
}
#MessageBox-header h2
{
color: #444;
font-size: 2em;
font-weight: 700;
margin-bottom: 3px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
#MessageBox-header p
{
color: #444;
font-size: 1.3em;
margin: 0;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
text-shadow: none;
}
#MessageBox .txt-fld
{
position: relative;
width: 364px;
padding: 14px 20px;
border-bottom: 1px solid #EEE;
text-align: right;
}
#MessageBox .btn-fld
{
width: 254px;
overflow: hidden;
padding: 12px 20px 12px 130px;
}
#MessageBox .txt-fld label
{
display: block;
float: left;
width: 90px;
padding-top: 8px;
color: #222;
font-size: 1.3em;
text-align: left;
}
#MessageBox .txt-fld input
{
width: 244px;
padding: 8px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
font-size: 1.2em;
color: #222;
background: #F7F7F7;
font-family: "Helvetica Neue";
outline: none;
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #E7E6E6;
border-bottom: 1px solid #E7E6E6;
}
#MessageBox .txt-fld input.good_input
{
background: #DEF5E1 url(../img/good.png) 236px center no-repeat;
}
#MessageBox .txt-fld input.error_input
{
background: #FDE0E0;
}
p.error
{
position: absolute;
bottom: 48px;
right: 20px;
width: 262px;
color: #FFF;
font-size: 1.1em;
padding-bottom: 5px;
background: url(../img/error-arw.png) 20px bottom no-repeat;
text-align: left;
margin: 0;
text-shadow: none;
}
p.error span
{
display: inline-block;
background: #D43636;
padding: 6px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.txt-fld input:focus, .txt-fld textarea:focus
{
background-color: #FAF9DC;
}
.button
{
float: right;
font-family: "Helvetica Neue" , "Helvetica" , "Arial" , sans-serif;
background: #3F9D4A;
border: none;
width: auto;
overflow: visible;
font-size: 1.4em;
color: #FFF;
padding: 7px 10px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
font-weight: bold;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.modal_close
{
position: absolute;
top: 12px;
right: 12px;
display: block;
width: 14px;
height: 14px;
background: url(../img/modal_close.png);
z-index: 2;
}
Code Behind For Message Box User Controller
protected void Page_Load(object sender, EventArgs e)
{
}
public void showPopupMesage(string title, string message)
{
ModalPopupExtender1.Show();
Label2.Text = title;
Label1.Text = message;
}
public void closePopup()
{
ModalPopupExtender1.Hide();
}
protected void Button1_Click(object sender, EventArgs e)
{
ModalPopupExtender1.Hide();
}
The MessageModalPopup.aspx Page
<%@ Register Src="~/UserControl/MessageBox.ascx" TagName="MessageBox" TagPrefix="uc" %> <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <asp:Button ID="Button1" runat="server" Text="Show Message Box" OnClick="Button1_Click" /> <uc:MessageBox ID="MessageBox1" runat="server"></uc:MessageBox> </asp:Content>
The Code Behind for MessageModalPopup.aspx
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
MessageBox1.showPopupMesage("Message Box", "Hello world");
}
By Mohd Zulkamal
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)
0 comments:
Post a Comment