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

-
Image
SQL Server Reporting Service(SSRS) is a full range of ready-to-use tools and services to help you create, deploy, and manage reports for your organization, as well as programming features that enable you to extend and customize your reporting functionality. The Report Viewer provide functionality to save the report as a pdf, word and also as a excel format. Sometime organization require this feature, sometime not. This is how to disable save as function in Report Viewer(SSRS). The example will invoke methode pre-render in Report Viewer Controller. The ASPX Page <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"     Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %> : : : <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat...
Read more

How to create DataGrid or GridView in JSP - Servlet

-
Image
Hi there, today I will like to share my knowledge on creating basic Datagrid in JSP. This is my solution but not a permanent solution in all other cases. Maybe you can enhance this code to achieve your own objective. In this tutorial, I will use basic servlet and JSP. Note: In this tutorial, I will use this library:- MySQL JDBC Driver JSTL 1.1 the project will run on source JDK 7 This is the database table DROP TABLE IF EXISTS `blogtest`.`usersprofile`; CREATE TABLE  `blogtest`.`usersprofile` (   `userid` varchar(30) NOT NULL,   `firstName` varchar(45) NOT NULL,   `lastName` varchar(45) NOT NULL,   `emailAddress` varchar(45) NOT NULL,   PRIMARY KEY (`userid`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `usersprofile` VALUES ('Ahmad','Ahmad','Ahmad','Ahmad@gmail.com'), ('Ahmad1','Ahmad1','Ahmad1','Ahmad1@gmail.com'), ('Ahmad10','Ahmad10','Ahmad10','Ahmad10@gmail.com'), ('Ahmad11...
Read more

Control Webpart Visible/Enable using macro in Kentico

-
Image
Simple post just to show how you can enable or visible the webpart in certain page. This is basically to avoid using many template. You can use only one template that have many webpart, and you can control visible/enable it using macro. Macro Code {% if(NodeAlias == "Search") {    return true; } else {  return false; } %} 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 =)
Read more