Modal Popup Message Box ASP.NEt C# Example


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
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 =)

Popular posts from this blog

Example to disable save as certain file type in SSRS Report Viewer

Phone book application example - Java